@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;600;700;800&display=swap');
:root{--bg:#0a0e1a;--safe:#00e5a0;--hypo:#4fc3f7;--hyper:#ff6b6b;--warn:#ffd166;--border:rgba(0,229,160,0.2);--text:#e8f4f8;--mono:'Space Mono','SF Mono','Fira Code','Cascadia Code','Consolas',monospace;--ui:'Syne','Inter','Segoe UI',system-ui,-apple-system,sans-serif;}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);font-family:var(--ui);color:var(--text);min-height:100svh;overflow-x:hidden;user-select:none;-webkit-tap-highlight-color:transparent;}
.screen{display:none;width:100%;min-height:100svh;}
.screen.active{display:flex;}

/* INTRO */
#intro{flex-direction:column;align-items:center;justify-content:flex-start;background:radial-gradient(ellipse at 50% 30%,#0d2a4a 0%,#040810 70%);padding:2rem;text-align:center;position:relative;overflow-x:hidden;min-height:100vh;overflow-y:auto;}
#intro::before{content:'';position:absolute;width:600px;height:600px;background:radial-gradient(circle,rgba(0,229,160,0.06) 0%,transparent 70%);top:-100px;left:50%;transform:translateX(-50%);animation:pulse 4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.5;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.1)}}
.intro-logo{font-size:clamp(2.5rem,8vw,5rem);font-weight:800;letter-spacing:-2px;background:linear-gradient(135deg,#00e5a0,#4fc3f7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.5rem;position:relative;z-index:1;}
.intro-sub{font-family:var(--mono);font-size:.85rem;color:rgba(200,220,240,0.6);letter-spacing:3px;text-transform:uppercase;margin-bottom:2rem;z-index:1;}
.plane-preview{animation:float 3s ease-in-out infinite;margin-bottom:1.5rem;z-index:1;}
@keyframes float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-20px) rotate(3deg)}}
/* ═════════════════════════════════════════════════════════════════════════════
   MAGAZINE GRID LAYOUT — Uniform grid with expandable cards
   ═════════════════════════════════════════════════════════════════════════════ */
.scenario-cards{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-gap: 1rem;
  grid-auto-flow: row;
  max-width: 1400px;
  margin: 0 auto 2.5rem;
  padding: 0 1rem;
  z-index: 1;
}
.s-card{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(0,229,160,0.2);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  cursor: pointer;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 160px;
  max-height: 160px;
}
.s-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}

/* All cards same size when collapsed */
.s-card:not(.expanded){
  grid-column: auto !important;
}

/* Scenario 1 starts expanded */
.s-card[data-scenario="1"]{
  background: linear-gradient(145deg, rgba(0,229,160,0.08) 0%, rgba(79,195,247,0.04) 100%);
  border-color: rgba(0,229,160,0.35);
}

/* Featured card styling */
.s-card[data-scenario="1"],
.s-card[data-scenario="7"],
.s-card[data-scenario="13"]{
  background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
}
/* Card border colors by scenario */
.s-card[data-scenario="1"]{border-color:rgba(0,229,160,0.22);}
.s-card[data-scenario="2"]{border-color:rgba(255,107,107,0.22);}
.s-card[data-scenario="3"]{border-color:rgba(255,60,60,0.22);}
.s-card[data-scenario="4"]{border-color:rgba(79,195,247,0.22);}
.s-card[data-scenario="5"]{border-color:rgba(192,132,252,0.22);}
.s-card[data-scenario="6"]{border-color:rgba(255,153,102,0.22);}
.s-card[data-scenario="7"]{border-color:rgba(255,82,82,0.22);}
.s-card[data-scenario="8"]{border-color:rgba(100,149,237,0.22);}
.s-card[data-scenario="9"]{border-color:rgba(218,112,214,0.22);}
.s-card[data-scenario="10"]{border-color:rgba(64,224,208,0.22);}
.s-card[data-scenario="11"]{border-color:rgba(255,105,180,0.22);}
.s-card[data-scenario="12"]{border-color:rgba(154,205,50,0.22);}
.s-card[data-scenario="13"]{border-color:rgba(255,165,0,0.22);}

/* Hover/Selected states */
.s-card:hover,.s-card.selected{transform:translateY(-4px);}
.s-card[data-scenario="1"]:hover,.s-card[data-scenario="1"].selected{border-color:rgba(0,229,160,0.75);background:rgba(0,229,160,0.07);box-shadow:0 0 20px rgba(0,229,160,0.11);}
.s-card[data-scenario="2"]:hover,.s-card[data-scenario="2"].selected{border-color:rgba(255,107,107,0.75);background:rgba(255,107,107,0.07);box-shadow:0 0 20px rgba(255,107,107,0.11);}
.s-card[data-scenario="3"]:hover,.s-card[data-scenario="3"].selected{border-color:rgba(255,60,60,0.75);background:rgba(255,60,60,0.07);box-shadow:0 0 20px rgba(255,60,60,0.11);}
.s-card[data-scenario="4"]:hover,.s-card[data-scenario="4"].selected{border-color:rgba(79,195,247,0.75);background:rgba(79,195,247,0.07);box-shadow:0 0 20px rgba(79,195,247,0.11);}
.s-card[data-scenario="5"]:hover,.s-card[data-scenario="5"].selected{border-color:rgba(192,132,252,0.75);background:rgba(192,132,252,0.07);box-shadow:0 0 20px rgba(192,132,252,0.11);}
.s-card[data-scenario="6"]:hover,.s-card[data-scenario="6"].selected{border-color:rgba(255,153,102,0.75);background:rgba(255,153,102,0.07);box-shadow:0 0 20px rgba(255,153,102,0.11);}
.s-card[data-scenario="7"]:hover,.s-card[data-scenario="7"].selected{border-color:rgba(255,82,82,0.75);background:rgba(255,82,82,0.07);box-shadow:0 0 20px rgba(255,82,82,0.11);}
.s-card[data-scenario="8"]:hover,.s-card[data-scenario="8"].selected{border-color:rgba(100,149,237,0.75);background:rgba(100,149,237,0.07);box-shadow:0 0 20px rgba(100,149,237,0.11);}
.s-card[data-scenario="9"]:hover,.s-card[data-scenario="9"].selected{border-color:rgba(218,112,214,0.75);background:rgba(218,112,214,0.07);box-shadow:0 0 20px rgba(218,112,214,0.11);}
.s-card[data-scenario="10"]:hover,.s-card[data-scenario="10"].selected{border-color:rgba(64,224,208,0.75);background:rgba(64,224,208,0.07);box-shadow:0 0 20px rgba(64,224,208,0.11);}
.s-card[data-scenario="11"]:hover,.s-card[data-scenario="11"].selected{border-color:rgba(255,105,180,0.75);background:rgba(255,105,180,0.07);box-shadow:0 0 20px rgba(255,105,180,0.11);}
.s-card[data-scenario="12"]:hover,.s-card[data-scenario="12"].selected{border-color:rgba(154,205,50,0.75);background:rgba(154,205,50,0.07);box-shadow:0 0 20px rgba(154,205,50,0.11);}
.s-card[data-scenario="13"]:hover,.s-card[data-scenario="13"].selected{border-color:rgba(255,165,0,0.75);background:rgba(255,165,0,0.07);box-shadow:0 0 20px rgba(255,165,0,0.11);}
.s-card.done{opacity:0.85;}
.s-card-done-badge{display:none;position:absolute;top:8px;right:10px;font-size:.68rem;font-family:var(--mono);color:#00e5a0;opacity:0.75;letter-spacing:.5px;}
.s-card.done .s-card-done-badge{display:block;}
.s-card-patient{display:flex;align-items:center;gap:.4rem;margin-bottom:.35rem;}
.s-card-avatar{font-size:1.05rem;line-height:1;}
.s-card-diff{font-family:var(--mono);font-size:.6rem;letter-spacing:1.5px;padding:1px 6px;border-radius:3px;background:rgba(255,255,255,0.06);}
.s-card[data-scenario="1"] .s-card-diff{color:rgba(0,229,160,0.65);}
.s-card[data-scenario="2"] .s-card-diff{color:rgba(255,107,107,0.65);}
.s-card[data-scenario="3"] .s-card-diff{color:rgba(255,80,80,0.65);}
.s-card[data-scenario="4"] .s-card-diff{color:rgba(79,195,247,0.65);}
.s-card[data-scenario="5"] .s-card-diff{color:rgba(192,132,252,0.65);}
.s-card[data-scenario="6"] .s-card-diff{color:rgba(255,153,102,0.65);}
.s-card[data-scenario="7"] .s-card-diff{color:rgba(255,100,100,0.65);}
.s-card[data-scenario="8"] .s-card-diff{color:rgba(100,149,237,0.65);}
.s-card[data-scenario="9"] .s-card-diff{color:rgba(218,112,214,0.65);}
.s-card[data-scenario="10"] .s-card-diff{color:rgba(64,224,208,0.65);}
.s-card[data-scenario="11"] .s-card-diff{color:rgba(255,105,180,0.65);}
.s-card[data-scenario="12"] .s-card-diff{color:rgba(154,205,50,0.65);}
.s-card[data-scenario="13"] .s-card-diff{color:rgba(255,165,0,0.65);}

/* ═════════════════════════════════════════════════════════════════════════════
   EXPANDABLE CARD SYSTEM — Dynamic scenario details with SVG themes
   ═════════════════════════════════════════════════════════════════════════════ */
.s-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 140px;
}
.s-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  overflow: hidden;
  border-radius: inherit;
}
.s-card-bg svg {
  width: 100%;
  height: 100%;
}
.s-card:hover .s-card-bg,
.s-card.expanded .s-card-bg {
  opacity: 1;
}
.s-card-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Expanded state - full width with all details visible */
.s-card.expanded {
  grid-column: 1 / -1 !important;
  min-height: auto;
  max-height: none;
  z-index: 10;
  padding: 1.5rem;
}
.s-card.expanded .s-card-bg {
  opacity: 0.6;
}
.s-card-expanded {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.4s ease,
              margin 0.3s ease;
}
.s-card.expanded .s-card-expanded {
  max-height: 500px;
  opacity: 1;
  margin-top: 1.2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
}
.s-card-details {
  background: rgba(0,0,0,0.35);
  border-radius: 10px;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
}
.detail-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(240,245,255,0.95);
}
.detail-row:last-child {
  margin-bottom: 0;
}
.detail-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  line-height: 1.4;
}
.detail-label {
  font-weight: 600;
  color: rgba(200,220,240,0.7);
  margin-right: 0.3rem;
}
.s-card-challenge {
  background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.2) 100%);
  border-radius: 10px;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.1);
  border-left: 4px solid currentColor;
  backdrop-filter: blur(8px);
}
.challenge-title {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(200,220,240,0.65);
  margin-bottom: 0.6rem;
  font-weight: 700;
}
.challenge-items {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.challenge-item {
  font-size: 0.82rem;
  color: rgba(235,240,250,0.9);
  padding: 0.25rem 0;
  line-height: 1.4;
}

/* Card header wrapper */
.s-card-header {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Collapsed card - compact view */
.s-card:not(.expanded) .s-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.75rem;
}
.s-card:not(.expanded) .s-card-title {
  font-size: 0.95rem;
}

/* Expanded card layout */
.s-card.expanded .s-card-content {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2rem;
}
.s-card.expanded .s-card-header {
  display: flex;
  flex-direction: column;
}
.s-card.expanded .s-card-title {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.s-card.expanded .s-card-desc {
  font-size: 1rem;
  color: rgba(220,235,250,0.9);
}
.s-card.expanded .s-card-details,
.s-card.expanded .s-card-challenge {
  margin-bottom: 0;
  min-width: 260px;
}

/* Responsive expanded layout */
@media (max-width: 767px) {
  .s-card.expanded .s-card-content {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .s-card.expanded .s-card-header {
    flex: 1;
  }
}

/* Visual indicator for expandable cards */
.s-card::after {
  content: 'Click to expand';
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-family: var(--mono);
  font-size: 0.68rem;
  color: rgba(200,220,240,0.35);
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  pointer-events: none;
}
.s-card.expanded::after {
  content: 'Click anywhere to collapse';
  color: rgba(200,220,240,0.7);
}
.s-card:hover::after {
  color: rgba(200,220,240,0.6);
}

/* Responsive expanded layout */
@media (max-width: 767px) {
  .s-card.expanded .s-card-content {
    flex-direction: column;
    gap: 0.5rem;
  }
  .s-card.expanded .s-card-header {
    flex: 1;
  }
  .s-card.expanded .s-card-expanded {
    grid-template-columns: 1fr;
  }
}

/* SVG Theme Colors per Scenario */
.s-card-bg[data-scenario="1"] { --theme-col: #00e5a0; }
.s-card-bg[data-scenario="2"] { --theme-col: #ff6b6b; }
.s-card-bg[data-scenario="3"] { --theme-col: #ff4444; }
.s-card-bg[data-scenario="4"] { --theme-col: #4fc3f7; }
.s-card-bg[data-scenario="5"] { --theme-col: #c084fc; }
.s-card-bg[data-scenario="6"] { --theme-col: #ff9966; }
.s-card-bg[data-scenario="7"] { --theme-col: #ff5252; }
.s-card-bg[data-scenario="8"] { --theme-col: #6495ed; }
.s-card-bg[data-scenario="9"] { --theme-col: #da70d6; }
.s-card-bg[data-scenario="10"] { --theme-col: #40e0d0; }
.s-card-bg[data-scenario="11"] { --theme-col: #ff69b4; }
.s-card-bg[data-scenario="12"] { --theme-col: #9acd32; }
.s-card-bg[data-scenario="13"] { --theme-col: #ffa500; }
.s-card-num{font-family:var(--mono);font-size:.75rem;color:rgba(200,220,240,0.3);margin-bottom:.3rem;}
.s-card-title{font-weight:700;font-size:1rem;margin-bottom:.3rem;}
.s-card-desc{font-size:.75rem;color:rgba(200,220,240,0.55);line-height:1.4;}
.btn-start{font-family:var(--ui);font-weight:700;font-size:1rem;letter-spacing:2px;text-transform:uppercase;padding:1rem 3rem;background:linear-gradient(135deg,#00e5a0,#00b8d9);color:#060f1a;border:none;border-radius:50px;cursor:pointer;transition:all .2s;position:relative;z-index:1;box-shadow:0 0 30px rgba(0,229,160,0.3);}
.btn-start:hover{transform:scale(1.04);box-shadow:0 0 50px rgba(0,229,160,0.5);}
.stars-bg{position:absolute;inset:0;pointer-events:none;}
.star{position:absolute;border-radius:50%;background:white;animation:twinkle var(--dur) ease-in-out infinite;animation-delay:var(--delay);}
@keyframes twinkle{0%,100%{opacity:.2}50%{opacity:.8}}

/* ── Settings gear ── */
#btn-settings{background:none;border:none;cursor:pointer;font-size:1rem;color:rgba(200,220,240,0.45);padding:.2rem .4rem;border-radius:6px;transition:color .2s;}
#btn-settings:hover{color:#00e5a0;}
#settings-popover{
  position:absolute;top:calc(100% + 8px);right:0;
  background:rgba(6,14,30,0.97);border:1px solid var(--border);
  border-radius:10px;padding:.8rem 1rem;min-width:200px;
  z-index:50;display:none;box-shadow:0 8px 32px rgba(0,0,0,0.6);
}
#settings-popover.show{display:block;}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-family:var(--mono);font-size:.72rem;color:rgba(200,220,240,0.7);}
/* Toggle switch */
.tog{position:relative;width:36px;height:20px;flex-shrink:0;}
.tog input{opacity:0;width:0;height:0;}
.tog-slider{position:absolute;inset:0;background:rgba(255,255,255,0.12);border-radius:20px;cursor:pointer;transition:.25s;}
.tog-slider:before{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.25s;}
.tog input:checked+.tog-slider{background:var(--safe);}
.tog input:checked+.tog-slider:before{transform:translateX(16px);}

/* ── Briefing overlay ── */
#briefing-overlay{
  position:absolute;inset:0;z-index:40;
  display:flex;align-items:center;justify-content:center;
  background:rgba(3,8,20,0.92);
  backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;
  transition:opacity .35s ease;
}
#briefing-overlay.show{opacity:1;pointer-events:all;}
#briefing-card{
  background:linear-gradient(145deg,rgba(6,16,36,0.98),rgba(4,10,24,0.98));
  border:1px solid rgba(0,229,160,0.3);
  border-radius:18px;
  padding:2rem 2.2rem 1.6rem;
  max-width:440px;width:90%;
  box-shadow:0 0 60px rgba(0,229,160,0.12),0 20px 60px rgba(0,0,0,0.7);
  animation:cardSlideIn .4s cubic-bezier(.22,1,.36,1) both;
}
@keyframes cardSlideIn{from{transform:translateY(28px);opacity:0}to{transform:translateY(0);opacity:1}}
.brief-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem;}
.brief-avatar{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex-shrink:0;border:2px solid rgba(0,229,160,0.3);}
.brief-patient{font-family:var(--mono);}
.brief-name{font-size:1rem;font-weight:700;color:#e0f8ef;letter-spacing:1px;}
.brief-meta{font-size:.82rem;color:rgba(200,220,240,0.5);margin-top:.2rem;}
.brief-scenario-tag{font-family:var(--mono);font-size:.75rem;letter-spacing:2px;color:rgba(0,229,160,0.6);text-transform:uppercase;margin-bottom:.6rem;}
.brief-challenge{font-family:var(--mono);font-size:.92rem;line-height:1.7;color:rgba(200,230,220,0.85);padding:.9rem 1rem;background:rgba(0,229,160,0.05);border-left:3px solid rgba(0,229,160,0.35);border-radius:0 8px 8px 0;margin-bottom:1rem;}
.brief-goal{font-family:var(--mono);font-size:.85rem;color:rgba(255,210,80,0.8);margin-bottom:1.4rem;padding:.6rem .8rem;background:rgba(255,210,80,0.06);border-radius:6px;}
.brief-goal span{color:#ffd166;font-weight:700;}
.brief-footer{display:flex;align-items:center;gap:1rem;}
.brief-countdown-bar{flex:1;height:4px;background:rgba(255,255,255,0.08);border-radius:2px;overflow:hidden;}
.brief-countdown-fill{height:100%;background:var(--safe);border-radius:2px;width:100%;transition:width linear;}
#btn-brief-start{font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:1px;padding:.55rem 1.2rem;background:linear-gradient(135deg,#00e5a0,#00b8d9);color:#060f1a;border:none;border-radius:8px;cursor:pointer;white-space:nowrap;transition:transform .15s;}
#btn-brief-start:hover{transform:scale(1.04);}
/* ── Action log ── */
#action-log{width:100%;pointer-events:none;display:flex;flex-direction:column;gap:2px;overflow:hidden;opacity:0.85;}

/* ══ Side Prompt Rail ══ */
#prompt-rail{
  width:100%;
  pointer-events:none;
  display:flex;flex-direction:column;
  gap:4px;
  overflow:hidden;
}
.prompt-card{
  background:rgba(4,10,24,0.88);
  border-radius:9px;
  border-left:3px solid #ffd166;
  padding:.45rem .7rem .45rem .55rem;
  font-family:var(--mono);
  font-size:clamp(.6rem, 1.45vw, .75rem);
  line-height:1.5;
  white-space:normal;
  word-break:break-word;
  backdrop-filter:blur(6px);
  transform:translateX(0);
  transition:opacity .4s, transform .4s;
  position:relative;
  overflow:visible;    /* Show all content */
  flex-shrink:0;
}
.prompt-card.type-upcoming{ border-left-color:#ffd166; }
.prompt-card.type-active  { border-left-color:#ff9d42; animation:promptPulse 1s ease-in-out infinite; }
.prompt-card.type-hint    { border-left-color:#00e5a0; }
.prompt-card.type-urgent  { border-left-color:#ff4444; animation:promptPulse .5s ease-in-out infinite; }
.prompt-card.type-past    { border-left-color:rgba(255,255,255,0.15); opacity:.45; }
@keyframes promptPulse{
  0%,100%{box-shadow:0 0 0 rgba(255,157,66,0)}
  50%    {box-shadow:0 2px 12px rgba(255,157,66,0.35)}
}
.prompt-card.type-urgent{ animation-name:promptPulseRed; }
@keyframes promptPulseRed{
  0%,100%{box-shadow:0 0 0 rgba(255,68,68,0)}
  50%    {box-shadow:0 2px 14px rgba(255,68,68,0.45)}
}
.prompt-icon { font-size:.85rem; display:block; margin-bottom:1px; }
.prompt-head { font-size:.78rem; font-weight:700; letter-spacing:.5px; color:#e8f4f8; text-shadow:0 0 8px currentColor; }
.prompt-sub  { font-size:.72rem; color:rgba(220,235,250,0.85); margin-top:1px; line-height:1.5; display:block; }
.prompt-countdown{
  font-size:.72rem; font-weight:700; letter-spacing:1px;
  display:block; margin-top:2px;
}
.prompt-bar-wrap{
  height:2px; background:rgba(255,255,255,0.08);
  border-radius:2px; margin-top:4px;
  overflow:hidden;
}
.prompt-bar{
  height:100%; border-radius:2px;
  transition:width .25s linear;
}
.alog-entry{font-family:var(--mono);font-size:.62rem;padding:.15rem .4rem;border-radius:4px;background:rgba(4,10,24,0.72);border-left:2px solid;color:rgba(210,230,220,0.75);animation:alogIn .2s ease both;transition:opacity .5s;line-height:1.3;white-space:normal;word-break:break-word;}
@keyframes alogIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.alog-entry.fading{opacity:0;}
/* ── Ketone meter ── */
#ketone-meter{position:absolute;top:14px;right:10px;width:130px;z-index:22;pointer-events:none;background:rgba(4,10,24,0.82);border:1px solid rgba(255,107,107,0.35);border-radius:9px;padding:.55rem .7rem;display:none;}
#ketone-meter.show{display:block;}
.ket-title{font-family:var(--mono);font-size:.78rem;color:rgba(255,107,107,0.7);letter-spacing:1px;margin-bottom:.35rem;}
.ket-label{font-family:var(--mono);font-size:.85rem;font-weight:700;color:#ff6b6b;margin-bottom:.3rem;}
.ket-bar-wrap{height:6px;background:rgba(255,255,255,0.08);border-radius:3px;overflow:hidden;}
.ket-bar{height:100%;border-radius:3px;transition:width .8s ease,background .8s;}
.ket-warn{font-family:var(--mono);font-size:.75rem;color:rgba(255,107,107,0.6);margin-top:.3rem;min-height:.8rem;}
/* ── Pre-bolus challenge ── */
#prebolus-banner{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);z-index:30;pointer-events:none;background:rgba(4,10,24,0.92);border:2px solid #ffd166;border-radius:10px;padding:.6rem 1.2rem;font-family:var(--mono);font-size:.78rem;color:#ffd166;text-align:center;white-space:nowrap;opacity:0;transition:opacity .25s;}
#prebolus-banner.show{opacity:1;}
#prebolus-timer-bar{height:3px;background:rgba(255,209,50,0.15);border-radius:2px;margin-top:.4rem;overflow:hidden;}
#prebolus-fill{height:100%;background:#ffd166;border-radius:2px;transition:width linear;}
/* ── CGM lag ── */
#cgm-lag-tag{font-family:var(--mono);font-size:.75rem;color:rgba(255,160,50,0.8);padding:.15rem .4rem;background:rgba(4,10,24,0.75);border-radius:4px;border:1px solid rgba(255,160,50,0.3);margin-top:.2rem;display:none;}
#cgm-lag-tag.show{display:inline-block;}
/* ── Settings popover layout fix ── */
#settings-popover{display:none;flex-direction:column;gap:.55rem;}
#settings-popover.show{display:flex;}

#game{flex-direction:column;height:100dvh;height:100svh;overflow:hidden;position:relative;}
#hud{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:.4rem 1rem;
  background:rgba(5,12,25,0.97);
  border-bottom:1px solid var(--border);
  z-index:20;min-height:44px;
}

/* Left — logo + scenario pill */
.hud-left{display:flex;align-items:center;gap:.6rem;}
.hud-logo{font-weight:800;font-size:.95rem;background:linear-gradient(135deg,#00e5a0,#4fc3f7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap;}
.hud-difficulty{
  font-family:var(--mono);font-size:.78rem;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:.18rem .5rem;border-radius:20px;
  white-space:nowrap;
}
.diff-easy    {background:rgba(0,229,160,0.15); color:#00e5a0; border:1px solid rgba(0,229,160,0.3);}
.diff-medium  {background:rgba(255,209,102,0.15);color:#ffd166; border:1px solid rgba(255,209,102,0.3);}
.diff-hard    {background:rgba(255,107,107,0.15);color:#ff6b6b; border:1px solid rgba(255,107,107,0.3);}
.diff-expert  {background:rgba(167,139,250,0.15);color:#a78bfa; border:1px solid rgba(167,139,250,0.3);}

/* Centre — timer dominant + score below */
.hud-centre{
  display:flex;flex-direction:column;align-items:center;
  gap:0;
}
#timer-display{
  font-family:var(--mono);font-size:1.35rem;font-weight:700;
  color:#ffd166;letter-spacing:3px;line-height:1.1;
  text-shadow:0 0 16px rgba(255,209,102,0.5);
  transition:color .3s, text-shadow .3s;
}
#timer-display.urgent{
  color:#ff6b6b !important;
  text-shadow:0 0 22px rgba(255,107,107,0.7) !important;
  animation:timerUrgent .45s ease-in-out infinite;
}
@keyframes timerUrgent{0%,100%{opacity:1}50%{opacity:.45}}
#score-display{
  font-family:var(--mono);font-size:.82rem;
  color:rgba(0,229,160,0.55);letter-spacing:.5px;
  margin-top:.05rem;
}

/* Right — settings gear */
.hud-right{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;}

#sky-area{flex:1;min-height:0;position:relative;overflow:visible;}
#sky-canvas{width:100%;height:100%;display:block;}
#glucose-scale{display:none;}
#alert-banner{display:none;}

/* Speech bubble — top of screen, large, in hyperglycemia zone */
#speech-bubble{
  position:static;
  width:100%;
  display:flex;          /* Always flex to keep layout stable */
  visibility:hidden;     /* Hidden but takes up space */
  opacity:0;
  align-items:flex-start;
  gap:8px;
  pointer-events:none;
  transition:opacity .35s, visibility .35s;}
#speech-bubble.show{
  visibility:visible;    /* Show when needed */
  opacity:1;}
/* Shift bubble to bottom of canvas during hyperglycemia so CGM trail is readable */
#speech-bubble.bubble-bottom{align-items:flex-start;}
#speech-bubble.bubble-bottom .bubble-box::after{bottom:auto;top:-12px;border-top-color:transparent;border-bottom-color:var(--safe);}
#speech-bubble.bubble-bottom .bubble-box.urgent::after{border-bottom-color:#ff6b6b;}
#speech-bubble.bubble-bottom .bubble-box.warn::after{border-bottom-color:#ffd166;}
/* speech-bubble.show handled above */
.doctor-sprite{
  width:72px;height:72px;flex-shrink:0;
  filter:drop-shadow(0 3px 10px rgba(0,229,160,0.25));
  margin-top:4px;
}
.bubble-box{
  background:rgba(4,10,24,0.96);
  border:2px solid var(--safe);
  border-radius:14px;
  padding:.85rem 1.1rem;
  font-family:var(--mono);
  font-size:1.0rem;
  line-height:1.65;
  color:#e0f8ef;
  position:relative;
  box-shadow:0 6px 32px rgba(0,229,160,0.18), inset 0 0 0 1px rgba(0,229,160,0.08);
  /* tail pointing DOWN toward the plane */
  min-width:min(220px,80vw);
  max-width:min(520px,92vw);
}
/* tail: bottom-left corner pointing down */
.bubble-box::after{
  content:'';position:absolute;
  bottom:-12px; left:20px;
  border:6px solid transparent;
  border-top-color:var(--safe);
}
/* inner glow line at top */
.bubble-box::before{
  content:'';position:absolute;
  top:0;left:16px;right:16px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,229,160,0.4),transparent);
  border-radius:2px;
}

.bubble-box.urgent{
  border-color:#ff6b6b;
  color:#fff0f0;
  box-shadow:0 6px 32px rgba(255,107,107,0.25), inset 0 0 0 1px rgba(255,107,107,0.1);
  animation:bubblePulse 1.2s ease-in-out infinite;
}
.bubble-box.urgent::after{border-top-color:#ff6b6b;}
.bubble-box.urgent::before{background:linear-gradient(90deg,transparent,rgba(255,107,107,0.4),transparent);}
.bubble-box.warn{
  border-color:#ffd166;
  color:#fffbe0;
  box-shadow:0 6px 32px rgba(255,209,102,0.2), inset 0 0 0 1px rgba(255,209,102,0.08);
}
.bubble-box.warn::after{border-top-color:#ffd166;}
.bubble-box.warn::before{background:linear-gradient(90deg,transparent,rgba(255,209,102,0.4),transparent);}
@keyframes bubblePulse{0%,100%{box-shadow:0 6px 32px rgba(255,107,107,0.25)}50%{box-shadow:0 6px 48px rgba(255,107,107,0.5)}}

/* Mood icon inside bubble */
.bubble-mood{font-size:1.1rem;margin-right:.4rem;vertical-align:-.1em;}
.bubble-label{display:block;font-size:.78rem;letter-spacing:2px;text-transform:uppercase;opacity:.5;margin-bottom:.25rem;}
.bubble-message{display:block;font-size:1.0rem;}

/* Dashboard */
#dashboard{display:flex;align-items:center;gap:.7rem;padding:.45rem .9rem;background:rgba(5,12,25,0.97);border-top:1px solid var(--border);flex-wrap:wrap;z-index:20;justify-content:flex-start;}
.dash-metric{display:flex;flex-direction:column;align-items:center;min-width:72px;}
.dash-label{font-family:var(--mono);font-size:.72rem;letter-spacing:2px;color:rgba(200,220,240,0.3);text-transform:uppercase;margin-bottom:.1rem;}
#glucose-value{font-family:var(--mono);font-size:2.6rem;font-weight:700;transition:color .3s,text-shadow .4s;line-height:1;letter-spacing:-1px;}
.glucose-unit{font-family:var(--mono);font-size:.65rem;color:rgba(200,220,240,0.22);display:block;margin-top:1px;}
#trend-arrow{font-size:1.8rem;transition:color .3s;line-height:1;filter:drop-shadow(0 0 4px currentColor);}
@keyframes arrowUp  {0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes arrowDown{0%,100%{transform:translateY(0)}50%{transform:translateY( 3px)}}
@keyframes arrowFlat{0%,100%{transform:translateX(0)}50%{transform:translateX( 2px)}}
#trend-arrow.up  {animation:arrowUp   1s ease-in-out infinite;}
#trend-arrow.down{animation:arrowDown 1s ease-in-out infinite;}
#trend-arrow.flat{animation:arrowFlat 2s ease-in-out infinite;}
#zone-badge{font-family:var(--mono);font-size:.82rem;padding:.22rem .55rem;border-radius:20px;letter-spacing:1px;font-weight:700;}
#iob-panel{display:flex;flex-direction:column;gap:.1rem;min-width:90px;}
.iob-label{font-family:var(--mono);font-size:.72rem;color:rgba(200,220,240,0.3);text-transform:uppercase;letter-spacing:1px;}
.iob-value{font-family:var(--mono);font-size:.92rem;color:#f0abcb;}
#iob-bar-wrap{width:100%;height:4px;background:rgba(240,171,203,0.12);border-radius:2px;margin-top:3px;}
#iob-bar{height:4px;background:#f0abcb;border-radius:2px;transition:width .5s;width:0%;}
.symptoms-area{flex:1;display:flex;gap:.3rem;flex-wrap:wrap;align-items:center;}
.symptom-tag{font-family:var(--mono);font-size:.75rem;padding:.15rem .4rem;border-radius:4px;border:1px solid currentColor;animation:tagPop .3s;}
@keyframes tagPop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
#cgm-lag-tag{font-family:var(--mono);font-size:.75rem;color:rgba(255,160,50,0.85);padding:.16rem .45rem;background:rgba(4,10,24,0.8);border-radius:4px;border:1px solid rgba(255,160,50,0.35);margin-top:.25rem;display:none;}
#cgm-lag-tag.show{display:inline-block;}

/* Controls 4-col grid */
#controls{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:.45rem;padding:.55rem .8rem;
  background:rgba(4,10,22,0.98);
  border-top:1px solid rgba(255,255,255,0.05);
  z-index:20;
}
.action-btn{
  font-family:var(--ui);font-weight:700;
  font-size:.82rem;letter-spacing:.8px;
  padding:.6rem .3rem .45rem;
  border:1px solid;border-radius:10px;
  cursor:pointer;transition:transform .1s, box-shadow .15s, background .15s;
  background:rgba(255,255,255,0.03);
  text-transform:uppercase;
  position:relative;overflow:hidden;
  white-space:nowrap;
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.btn-icon{font-size:1.15rem;line-height:1;display:block;}
.btn-label{display:block;letter-spacing:.8px;}
.btn-sub{display:block;font-size:.68rem;opacity:.45;letter-spacing:.3px;margin-top:1px;text-transform:none;font-weight:400;}
.action-btn:hover{transform:translateY(-2px);}
.action-btn:active{transform:scale(0.92)!important;}

/* ── Button urgency glow — three tiers ─────────────────────────────────── */
@keyframes btnUrgentPulse {
  0%,100% { box-shadow: 0 0 6px 1px var(--btn-glow); opacity: 1; }
  50%      { box-shadow: 0 0 18px 5px var(--btn-glow); opacity: 0.85; }
}
@keyframes btnActionGlow {
  0%,100% { box-shadow: 0 0 4px 1px var(--btn-glow); }
  50%      { box-shadow: 0 0 12px 3px var(--btn-glow); }
}
@keyframes btnSuggestShimmer {
  0%,100% { box-shadow: 0 0 3px 0px var(--btn-glow); }
  50%      { box-shadow: 0 0 7px 2px var(--btn-glow); }
}
.btn-urgent {
  animation: btnUrgentPulse 0.7s ease-in-out infinite;
  border-width: 2px !important;
}
.btn-action  { animation: btnActionGlow    1.4s ease-in-out infinite; }
.btn-suggest { animation: btnSuggestShimmer 2.4s ease-in-out infinite; }

/* Per-button glow colour */
.action-btn.bolus   { --btn-glow: rgba(255,107,157,0.7); }
.action-btn.basal   { --btn-glow: rgba(192,132,252,0.7); }
.action-btn.carbs15 { --btn-glow: rgba(255,209,102,0.7); }
.action-btn.meal    { --btn-glow: rgba(247,168,96,0.7);  }
.action-btn.exercise{ --btn-glow: rgba(0,229,160,0.6);   }

/* Per-action colours */
.action-btn.bolus  {border-color:#ff6b9d;color:#ff6b9d;}
.action-btn.bolus:hover{background:rgba(255,107,157,0.12);box-shadow:0 0 18px rgba(255,107,157,0.3);}
.action-btn.basal  {border-color:#c084fc;color:#c084fc;}
.action-btn.basal:hover{background:rgba(192,132,252,0.12);box-shadow:0 0 18px rgba(192,132,252,0.3);}
.action-btn.carbs15{border-color:#ffd166;color:#ffd166;}
.action-btn.carbs15:hover{background:rgba(255,209,102,0.1);box-shadow:0 0 14px rgba(255,209,102,0.2);}
.action-btn.meal   {border-color:#f7a860;color:#f7a860;}
.action-btn.meal:hover{background:rgba(247,168,96,0.1);box-shadow:0 0 14px rgba(247,168,96,0.2);}
.action-btn.exercise{border-color:#00e5a0;color:#00e5a0;}
.action-btn.exercise:hover{background:rgba(0,229,160,0.08);box-shadow:0 0 14px rgba(0,229,160,0.2);}
.action-btn.glucagon{border-color:#a78bfa;color:#a78bfa;}
.action-btn.glucagon:hover{background:rgba(167,139,250,0.12);box-shadow:0 0 18px rgba(167,139,250,0.3);}
.action-btn.nothing{border-color:rgba(200,220,240,0.18);color:rgba(200,220,240,0.3);}
.action-btn.recheck{border-color:#475569;color:#94a3b8;}
.action-btn.recheck:hover{background:rgba(71,85,105,0.15);}

/* Cooldown state */
.action-btn.on-cooldown{opacity:.38;cursor:not-allowed;transform:none!important;}

/* Cooldown bar — full-width bottom strip, thicker */
.cd-bar{
  position:absolute;bottom:0;left:0;
  height:3px;background:currentColor;
  border-radius:0 0 10px 10px;
  opacity:.7;
}

/* IOB bar */
#iob-bar-wrap{width:100%;height:3px;background:rgba(240,171,203,0.15);border-radius:2px;margin-top:3px;}
#iob-bar{height:3px;background:#f0abcb;border-radius:2px;transition:width .5s;width:0%;}


/* ══ Basal Clock Widget ══ */
#basal-clock{display:flex;flex-direction:column;align-items:center;gap:.15rem;min-width:52px;}
.basal-clock-label{font-family:var(--mono);font-size:.72rem;color:rgba(200,220,240,0.3);text-transform:uppercase;letter-spacing:1px;white-space:nowrap;}
#basal-ring-svg{overflow:visible;}
#basal-ring-track{fill:none;stroke:rgba(192,132,252,0.12);stroke-width:4;}
#basal-ring-fill{fill:none;stroke:#c084fc;stroke-width:4;stroke-linecap:round;
  stroke-dasharray:100 100;stroke-dashoffset:0;
  transform:rotate(-90deg);transform-origin:50% 50%;
  transition:stroke-dashoffset .8s ease, stroke .5s;}
#basal-ring-icon{font-size:9px;text-anchor:middle;dominant-baseline:middle;user-select:none;}
@keyframes basalPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}
#basal-clock.due #basal-ring-fill{stroke:#ffd166;animation:basalPulse .9s ease-in-out infinite;}
#basal-clock.due .basal-clock-label{color:#ffd166;}
#basal-clock.overdue #basal-ring-fill{stroke:#ff6b6b;animation:basalPulse .55s ease-in-out infinite;}
#basal-clock.overdue .basal-clock-label{color:#ff6b6b;}
#basal-clock.active #basal-ring-fill{stroke:#c084fc;}

/* ══ Dose Dial Modal ══ */
#dose-dial-modal,
#basal-pen-modal{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,0.85);backdrop-filter:blur(12px);
  z-index:110;align-items:center;justify-content:center;
}
#dose-dial-modal.show,
#basal-pen-modal.show{display:flex;}

.dial-box{
  background:linear-gradient(160deg,#0c1e3a 0%,#07111f 100%);
  border:1px solid rgba(255,107,157,0.3);
  border-radius:18px;
  padding:1.4rem 1.6rem 1.2rem;
  width:min(520px,95vw);
  box-shadow:0 0 60px rgba(255,107,157,0.12), 0 30px 80px rgba(0,0,0,0.8);
  animation:dialSlideIn .3s cubic-bezier(.22,1,.36,1) both;
}
@keyframes dialSlideIn{from{transform:translateY(20px) scale(0.97);opacity:0}to{transform:none;opacity:1}}

.dial-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1rem;
}
.dial-title{
  font-family:var(--mono);font-size:.78rem;font-weight:700;
  color:#ff9dc8;letter-spacing:2px;
}
.dial-patient-label{
  font-family:var(--mono);font-size:.78rem;
  color:rgba(200,220,240,0.4);letter-spacing:1px;
}

/* Pen SVG wrapper — dark display panel matching React reference */
.pen-wrap{
  width:100%;
  background:#0f172a;
  border-radius:24px;
  border:6px solid rgba(255,255,255,0.07);
  box-shadow:0 20px 40px -10px rgba(0,0,0,0.6),inset 0 4px 16px rgba(0,0,0,0.5);
  margin-bottom:1.1rem;
  overflow:hidden;
  user-select:none;
  position:relative;
}
#pen-svg{
  width:100%;height:auto;display:block;
  padding:12px 8px;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,0.5));
}

/* Knob click animation */
@keyframes knobClick{
  0%{transform:scale(1)}
  40%{transform:scale(0.96)}
  100%{transform:scale(1)}
}
.knob-click{ animation:knobClick .12s ease-out; }

/* Dose info row */
.dial-info-row{
  display:flex;align-items:center;gap:1.5rem;
  margin-bottom:.9rem;
}
.dial-dose-big{
  font-family:var(--mono);line-height:1;
  flex-shrink:0;
}
#dial-dose-number{
  font-size:2.8rem;font-weight:700;
  color:#00e5a0;
  transition:color .2s;
}
.dial-dose-unit{
  font-size:1rem;color:rgba(0,229,160,0.5);margin-left:3px;
}
.dial-suggestion{flex:1;}
.dial-sugg-label{
  font-family:var(--mono);font-size:.75rem;letter-spacing:1.5px;
  color:rgba(200,220,240,0.3);text-transform:uppercase;margin-bottom:.2rem;
}
.dial-sugg-val{
  font-family:var(--mono);font-size:.88rem;font-weight:700;color:#ffd166;
}
.dial-sugg-formula{
  font-family:var(--mono);font-size:.75rem;color:rgba(200,220,240,0.35);margin-top:.15rem;
}

/* Accuracy bar */
.dial-accuracy-wrap{margin-bottom:.4rem;}
.dial-accuracy-track{
  position:relative;height:6px;
  background:rgba(255,255,255,0.06);
  border-radius:4px;overflow:visible;
  margin-bottom:.25rem;
}
.dial-accuracy-fill{
  height:100%;border-radius:4px;
  background:#00e5a0;
  transition:width .15s, background .2s;
  min-width:0;
}
.dial-accuracy-target{
  position:absolute;top:-3px;
  width:3px;height:12px;
  background:#ffd166;border-radius:2px;
  transition:left .15s;
}
.dial-accuracy-labels{
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:.72rem;color:rgba(200,220,240,0.25);
}
.dial-accuracy-msg{
  font-family:var(--mono);font-size:.82rem;text-align:center;
  color:rgba(200,220,240,0.45);margin-bottom:.7rem;min-height:1em;
  transition:color .2s;
}

.dial-hint{
  font-family:var(--mono);font-size:.72rem;text-align:center;
  color:rgba(200,220,240,0.2);margin-bottom:.9rem;letter-spacing:.5px;
}

/* Buttons */
.dial-btns{display:flex;gap:.7rem;}
.dial-btn-inject{
  flex:1;font-family:var(--mono);font-weight:700;font-size:.82rem;
  padding:.7rem 1rem;letter-spacing:1px;
  background:linear-gradient(135deg,#ff6b9d,#c0392b);
  color:#fff;border:none;border-radius:10px;cursor:pointer;
  transition:all .2s;box-shadow:0 0 20px rgba(255,107,157,0.3);
}
.dial-btn-inject:not(:disabled):hover{
  transform:scale(1.02);box-shadow:0 0 32px rgba(255,107,157,0.5);
}
.dial-btn-inject:disabled{
  opacity:.35;cursor:not-allowed;background:rgba(255,107,157,0.2);box-shadow:none;
}
.dial-btn-cancel{
  font-family:var(--mono);font-size:.78rem;
  padding:.7rem 1.2rem;
  background:transparent;color:rgba(200,220,240,0.4);
  border:1px solid rgba(255,255,255,0.1);border-radius:10px;cursor:pointer;
  transition:all .2s;
}
.dial-btn-cancel:hover{border-color:rgba(255,255,255,0.25);color:rgba(200,220,240,0.7);}

.dial-mode-badge{
  font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:1px;
  padding:.12rem .4rem;border-radius:4px;text-transform:uppercase;
}
.dial-mode-badge.easy{background:rgba(0,229,160,0.15);color:#00e5a0;border:1px solid rgba(0,229,160,0.3);}
.dial-mode-badge.realistic{background:rgba(255,107,157,0.12);color:#ff9dc8;border:1px solid rgba(255,107,157,0.25);}


#feedback-modal{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,0.82);backdrop-filter:blur(10px);
  z-index:100;align-items:center;justify-content:center;padding:1rem;
  overflow-y:auto;
}
#feedback-modal.show{display:flex;}

/* Confetti canvas — sits behind modal box */
#confetti-canvas{
  position:fixed;inset:0;z-index:99;
  pointer-events:none;
}

.feedback-box{
  background:linear-gradient(160deg,#0c1e3a 0%,#070f20 100%);
  border:1px solid rgba(0,229,160,0.25);
  border-radius:20px;
  padding:0;
  max-width:540px;width:100%;
  position:relative;z-index:101;
  box-shadow:0 0 80px rgba(0,229,160,0.08), 0 30px 80px rgba(0,0,0,0.8);
  overflow:hidden;
  animation:fbSlideIn .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes fbSlideIn{from{transform:translateY(32px) scale(0.96);opacity:0}to{transform:none;opacity:1}}

/* Patient header strip */
.fb-header{
  display:flex;align-items:center;gap:1rem;
  padding:1.2rem 1.6rem 1rem;
  border-bottom:1px solid rgba(255,255,255,0.06);
  position:relative;
}
.fb-header::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,229,160,0.3),transparent);
}
.fb-avatar{font-size:2.4rem;line-height:1;flex-shrink:0;}
.fb-patient-info{flex:1;}
.fb-patient-name{font-family:var(--mono);font-size:.95rem;font-weight:700;color:#e0f8ef;letter-spacing:.5px;}
.fb-patient-meta{font-family:var(--mono);font-size:.78rem;color:rgba(200,220,240,0.45);margin-top:.15rem;}
.fb-scenario-tag{font-family:var(--mono);font-size:.75rem;letter-spacing:2px;color:rgba(0,229,160,0.55);text-transform:uppercase;}

/* Result badge */
.fb-result-badge{
  text-align:center;padding:.3rem .8rem;
  border-radius:20px;
  font-family:var(--mono);font-size:.85rem;font-weight:700;letter-spacing:1px;
  flex-shrink:0;
}
.fb-result-badge.success{background:rgba(0,229,160,0.15);color:#00e5a0;border:1px solid rgba(0,229,160,0.35);}
.fb-result-badge.fail{background:rgba(255,107,107,0.12);color:#ff6b6b;border:1px solid rgba(255,107,107,0.35);}
.fb-result-badge.fail-hypo{background:rgba(255,209,102,0.12);color:#ffd166;border:1px solid rgba(255,209,102,0.4);}
.fb-result-badge.fail-hyper{background:rgba(255,154,60,0.12);color:#ff9a3c;border:1px solid rgba(255,154,60,0.4);}
.fb-result-badge.fail-dka{background:rgba(180,0,80,0.18);color:#ff4488;border:1px solid rgba(255,68,136,0.5);animation:fbDkaFlash 1.2s ease-in-out infinite;}
@keyframes fbDkaFlash{0%,100%{opacity:1}50%{opacity:0.55}}
.fb-result-badge.fail{background:rgba(255,107,107,0.12);color:#ff6b6b;border:1px solid rgba(255,107,107,0.3);}

/* Stats row with TIR gauge */
.fb-stats{
  display:flex;align-items:center;gap:1.2rem;
  padding:1.1rem 1.6rem;
  border-bottom:1px solid rgba(255,255,255,0.04);
}

/* TIR circular gauge */
.tir-gauge{position:relative;flex-shrink:0;}
.tir-gauge svg{display:block;}
.tir-pct{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.tir-num{font-family:var(--mono);font-size:2rem;font-weight:700;line-height:1;}
.tir-lbl{font-family:var(--mono);font-size:.72rem;letter-spacing:1.5px;color:rgba(200,220,240,0.4);margin-top:2px;}

/* Stat pills */
.fb-stat-pills{display:flex;flex-direction:column;gap:.45rem;flex:1;}
.stat-pill{
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,0.04);border-radius:8px;
  padding:.35rem .7rem;
  font-family:var(--mono);font-size:.85rem;
}
.stat-pill-label{color:rgba(200,220,240,0.45);}
.stat-pill-value{font-weight:700;color:#e8f4f8;}

/* Result text */
.fb-content{padding:1rem 1.6rem 1.2rem;}
.feedback-result{font-size:1.5rem;font-weight:800;margin-bottom:.3rem;}
.feedback-title{font-size:1rem;font-weight:700;margin-bottom:.6rem;color:#e8f4f8;}
.feedback-body{font-size:.8rem;color:rgba(200,220,240,0.68);line-height:1.75;margin-bottom:.9rem;}
.feedback-guideline{
  background:rgba(0,229,160,0.05);
  border-left:3px solid rgba(0,229,160,0.4);
  padding:.65rem .9rem;
  font-family:var(--mono);font-size:.85rem;
  color:rgba(190,240,215,0.8);
  border-radius:0 8px 8px 0;
  margin-bottom:1.2rem;line-height:1.55;
}
.feedback-btns{display:flex;gap:.7rem;flex-wrap:wrap;}
.btn-next{
  font-family:var(--ui);font-weight:700;font-size:.88rem;
  padding:.7rem 1.8rem;
  background:linear-gradient(135deg,#00e5a0,#00b8d9);
  color:#060f1a;border:none;border-radius:50px;
  cursor:pointer;transition:all .2s;
  box-shadow:0 0 20px rgba(0,229,160,0.25);
}
.btn-next:hover{transform:scale(1.04);box-shadow:0 0 32px rgba(0,229,160,0.4);}
.btn-menu{
  font-family:var(--ui);font-weight:600;font-size:.88rem;
  padding:.7rem 1.6rem;
  background:transparent;color:var(--text);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:50px;cursor:pointer;transition:all .2s;
}
.btn-menu:hover{border-color:var(--safe);color:#00e5a0;}

/* ══ MOBILE RESPONSIVE ══ */
/* ═══════════════════════════════════════════════════
   RESPONSIVE SYSTEM
   xs  < 480px  — phone portrait
   sm  480–767  — phone landscape / small tablet
   md  768–1023 — tablet
   lg  1024+    — desktop
═══════════════════════════════════════════════════ */

/* ── Slide-up animation for mobile dial sheet ── */
@keyframes dialSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

@keyframes tutorialPulse {
  0%,100% { outline-color: rgba(0,229,160,0.9); box-shadow: 0 0 0 0 rgba(0,229,160,0.4); }
  50%      { outline-color: rgba(0,229,160,0.4); box-shadow: 0 0 0 8px rgba(0,229,160,0); }
}

/* ── PHONE PORTRAIT (≤479px) ── */
@media(max-width:479px){

  /* Intro */
  #intro{justify-content:flex-start;padding:1.2rem 1rem 2.5rem;overflow-y:auto;}
  .intro-logo{font-size:clamp(2.2rem,11vw,3.2rem);margin-bottom:.2rem;}
  .intro-sub{font-size:.68rem;margin-bottom:1.2rem;letter-spacing:2px;}
  .plane-preview{margin-bottom:1rem;font-size:2.8rem;}
  .scenario-cards{grid-template-columns:1fr;padding:0 .8rem;gap:.55rem;margin-bottom:1.4rem;}
  .s-card{grid-column:1 !important;padding:.85rem 1rem;}
  .s-card:nth-child(n){grid-column:1 !important;}
  .s-card[data-scenario="1"],
  .s-card[data-scenario="7"],
  .s-card[data-scenario="13"]{grid-column:1 !important;}
  .s-card-title{font-size:.92rem;}
  .s-card-desc{font-size:.7rem;}
  .btn-start{font-size:.88rem;padding:.85rem 2.5rem;}

  /* Pre-brief */
  .brief-card{padding:1.1rem 1rem;}
  .brief-avatar{width:44px;height:44px;font-size:1.3rem;}
  .brief-title{font-size:.95rem;}
  .brief-body{font-size:.88rem;}

  /* Game layout: flex-col, canvas takes all remaining space */
  #game{height:100dvh;display:flex;flex-direction:column;overflow:hidden;}
  #hud{padding:.3rem .6rem;min-height:40px;grid-template-columns:1fr auto 1fr;}
  .hud-logo{font-size:.75rem;}
  .hud-difficulty{display:none;}
  .hud-scenario-label{display:none;}
  #timer-display{font-size:1.1rem;letter-spacing:2px;}
  #score-display{font-size:.75rem;}
  /* sky-area consolidated above */

  /* Dashboard — horizontal scroll if needed */
  #dashboard{padding:.35rem .6rem;gap:.5rem;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  #dashboard::-webkit-scrollbar{display:none;}
  #glucose-value{font-size:2rem;}
  #trend-arrow{font-size:1.4rem;}
  .dash-metric{min-width:60px;}
  .dash-label{font-size:.68rem;}
  #zone-badge{font-size:.75rem;padding:.18rem .4rem;}
  #iob-panel{min-width:78px;}
  .iob-value{font-size:.85rem;}
  .symptoms-area{display:none;}

  /* Controls: 4 cols, compact */
  #controls{grid-template-columns:repeat(4,1fr);gap:.28rem;padding:.38rem .45rem;}
  .action-btn{padding:.42rem .15rem .32rem;font-size:.72rem;border-radius:8px;}
  .btn-icon{font-size:.9rem;}
  .btn-label{font-size:.72rem;}
  .btn-sub{display:none;}

  /* Dose dial — full-width bottom sheet */
  #dose-dial-modal{align-items:flex-end;}
  .dial-box{
    width:100vw;max-width:100vw;
    max-height:88dvh;overflow-y:auto;
    border-radius:20px 20px 0 0;
    padding:.9rem .9rem .8rem;
    position:fixed;bottom:0;left:0;right:0;
    animation:dialSlideUp .28s cubic-bezier(.22,1,.36,1) both;
  }
  .pen-wrap{border-radius:12px;}
  .dial-info-row{gap:.6rem;}
  .dial-dose-big span:first-child{font-size:2.2rem;}
  .dial-btns{gap:.5rem;}

  /* Feedback modal */
  #feedback-modal{padding:.5rem;}
  .feedback-box{padding:1rem;max-height:92dvh;overflow-y:auto;border-radius:16px;}
  .fb-stats{flex-wrap:wrap;gap:.5rem;}
  .fb-tir-gauge{width:72px;height:72px;}

  /* Side prompt rail — hidden on small phones */
  #side-prompt-rail{display:none;}
  /* action-log width set in main rule */
  
  /* Expanded cards on mobile */
  .s-card{
    min-height: 140px;
    max-height: 140px;
  }
  .s-card.expanded{
    min-height: auto;
    max-height: none;
  }
  .s-card.expanded .s-card-expanded{
    max-height: none;
    grid-template-columns: 1fr;
  }
  .s-card.expanded .s-card-content{
    grid-template-columns: 1fr;
  }
  .s-card.expanded .s-card-title{
    font-size: 1.2rem;
  }
  .s-card.expanded .detail-row{
    font-size: 0.8rem;
  }
  .s-card::after{
    font-size: 0.6rem;
  }
}

/* ── PHONE LANDSCAPE & LARGE PHONES (480–767px) ── */
@media(min-width:480px) and (max-width:767px){

  /* Intro */
  #intro{padding:1.5rem 1.5rem 2rem;}
  .scenario-cards{grid-template-columns:repeat(2, 1fr);padding:0 1rem;gap:.7rem;}
  .s-card{padding:1rem 1.2rem;min-height:150px;max-height:150px;}
  .s-card.expanded{grid-column:1/-1;min-height:auto;max-height:none;}
  .s-card.expanded .s-card-content{grid-template-columns:1fr;}

  /* Game */
  #game{height:100dvh;}
  #hud{padding:.35rem .8rem;}
  .hud-logo{font-size:.82rem;}
  .hud-difficulty{display:none;}
  #timer-display{font-size:1.2rem;}

  /* Dashboard */
  #dashboard{padding:.35rem .7rem;gap:.55rem;}
  #glucose-value{font-size:2.2rem;}

  /* Controls */
  #controls{grid-template-columns:repeat(4,1fr);gap:.35rem;padding:.42rem .6rem;}
  .action-btn{padding:.44rem .2rem .34rem;font-size:.75rem;}
  .btn-icon{font-size:.95rem;}
  .btn-sub{display:none;}

  /* Dial modal — bottom sheet */
  #dose-dial-modal{align-items:flex-end;}
  .dial-box{
    width:100vw;max-width:520px;margin:0 auto;
    max-height:85dvh;overflow-y:auto;
    border-radius:20px 20px 0 0;
    position:fixed;bottom:0;left:0;right:0;
    animation:dialSlideUp .28s cubic-bezier(.22,1,.36,1) both;
  }

  /* Feedback */
  .feedback-box{max-height:90dvh;overflow-y:auto;}
  .fb-stats{flex-wrap:wrap;}
}

/* ── TABLET (768–1023px) ── */
@media(min-width:768px) and (max-width:1023px){

  #intro{padding:2rem 2rem 3rem;}
  .scenario-cards{grid-template-columns:repeat(3, 1fr);max-width:900px;padding:0 1.5rem;}
  .s-card{padding:1.1rem 1.3rem;}

  #game{height:100dvh;}
  #hud{padding:.4rem 1.2rem;}
  #timer-display{font-size:1.3rem;}

  #dashboard{padding:.4rem 1rem;}
  #glucose-value{font-size:2.4rem;}

  #controls{gap:.4rem;padding:.5rem .8rem;}
  .action-btn{font-size:.8rem;}
  .btn-sub{font-size:.65rem;}

  .dial-box{width:min(480px,90vw);}
  .feedback-box{max-height:90dvh;overflow-y:auto;}
}

/* ── DESKTOP (1024px+) ── */

/* ══════════════════════════════════════════════════════
   LARGE-SCREEN BUTTON PANEL — single row, backlit style
   ══════════════════════════════════════════════════════ */
@media(min-width:1024px){

  /* Intro — magazine grid on large screens */
  .scenario-cards{grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));max-width:1200px;}
  .s-card{padding:1.3rem 1.6rem;}
  .s-card:nth-child(6n + 1) .s-card-title,
  .s-card[data-scenario="1"] .s-card-title,
  .s-card[data-scenario="7"] .s-card-title,
  .s-card[data-scenario="13"] .s-card-title{font-size:1.25rem;}
  
  /* Container: single flex row */
  #controls{
    display:flex;
    flex-direction:row;
    align-items:stretch;
    gap:.5rem;
    padding:.5rem .9rem;
    height:auto;
  }

  /* meal-gi-wrap is a flex child, same as buttons */
  .meal-gi-wrap{
    flex:1;
    display:flex;
    flex-direction:column;
    position:relative;
    gap:0;
    min-width:0;
  }

  /* GI chips float above the meal button */
  .gi-chips{
    position:absolute;
    bottom:calc(100% + 5px);
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:4px;
    z-index:30;
    background:rgba(4,10,22,0.96);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:8px;
    padding:4px 6px;
    white-space:nowrap;
    box-shadow:0 -4px 16px rgba(0,0,0,0.5);
  }

  .gi-chip{
    font-size:.72rem;
    padding:3px 8px;
  }

  /* Meal button fills the wrap */
  .meal-gi-wrap .action-btn{
    flex:1;
  }

  /* Every direct button child gets equal flex */
  #controls > .action-btn{
    flex:1;
    min-width:0;
  }

  /* ── Photorealistic black backlit button base ── */
  .action-btn{
    flex-direction:row;
    justify-content:center;
    align-items:center;
    gap:.55rem;
    padding:.55rem .4rem;
    border-radius:10px;
    font-size:.82rem;
    letter-spacing:.5px;

    /* Deep black gloss base */
    background:
      linear-gradient(180deg,
        rgba(60,65,75,0.55) 0%,
        rgba(12,14,20,0.97) 35%,
        rgba(4,6,12,1) 100%);
    border-width:1px;
    border-style:solid;

    /* Top specular edge — light catches the top rim */
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.13),
      inset 0 -1px 0 rgba(0,0,0,0.6),
      0 2px 8px rgba(0,0,0,0.6);

    position:relative;
    overflow:hidden;
  }

  /* Backlight glow layer — colour defined per-button below */
  .action-btn::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    opacity:0;
    transition:opacity .2s;
    pointer-events:none;
  }

  /* Bottom glow bleed — the coloured edge light */
  .action-btn::after{
    content:'';
    position:absolute;
    bottom:0; left:10%; right:10%;
    height:2px;
    border-radius:0 0 10px 10px;
    transition:opacity .3s, box-shadow .3s;
  }

  /* Icon stays emoji size */
  .action-btn .btn-icon{
    font-size:1.2rem;
    line-height:1;
    flex-shrink:0;
    filter:drop-shadow(0 0 3px var(--btn-glow, rgba(255,255,255,0.2)));
  }

  /* Label inline */
  .action-btn .btn-label{
    letter-spacing:.6px;
    white-space:nowrap;
  }

  /* Sub label hidden in row mode — shown as tooltip via title attr */
  .action-btn .btn-sub{ display:none; }

  /* Hover — deepen glow */
  .action-btn:hover{
    transform:translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.18),
      inset 0 -1px 0 rgba(0,0,0,0.7),
      0 4px 16px rgba(0,0,0,0.5),
      0 0 18px var(--btn-glow-spread, rgba(255,255,255,0.08));
  }

  .action-btn:hover::before{ opacity:.08; }

  .action-btn:active{
    transform:scale(0.96)!important;
    box-shadow:
      inset 0 2px 6px rgba(0,0,0,0.8),
      inset 0 1px 0 rgba(255,255,255,0.06);
  }

  /* ── Per-button backlight colours ── */

  .action-btn.bolus{
    --btn-glow: rgba(255,107,157,0.7);
    --btn-glow-spread: rgba(255,107,157,0.2);
    border-color:rgba(255,107,157,0.55);
    color:#ff6b9d;
  }
  .action-btn.bolus::after{
    background:#ff6b9d;
    box-shadow:0 0 10px 2px rgba(255,107,157,0.6), 0 0 25px 4px rgba(255,107,157,0.25);
    opacity:.9;
  }
  .action-btn.bolus::before{ background:radial-gradient(ellipse at 50% 100%, rgba(255,107,157,0.3), transparent 70%); }

  .action-btn.basal{
    --btn-glow: rgba(192,132,252,0.7);
    --btn-glow-spread: rgba(192,132,252,0.2);
    border-color:rgba(192,132,252,0.55);
    color:#c084fc;
  }
  .action-btn.basal::after{
    background:#c084fc;
    box-shadow:0 0 10px 2px rgba(192,132,252,0.6), 0 0 25px 4px rgba(192,132,252,0.25);
    opacity:.9;
  }
  .action-btn.basal::before{ background:radial-gradient(ellipse at 50% 100%, rgba(192,132,252,0.28), transparent 70%); }

  .action-btn.carbs15{
    --btn-glow: rgba(255,209,102,0.7);
    --btn-glow-spread: rgba(255,209,102,0.2);
    border-color:rgba(255,209,102,0.55);
    color:#ffd166;
  }
  .action-btn.carbs15::after{
    background:#ffd166;
    box-shadow:0 0 10px 2px rgba(255,209,102,0.6), 0 0 25px 4px rgba(255,209,102,0.25);
    opacity:.9;
  }
  .action-btn.carbs15::before{ background:radial-gradient(ellipse at 50% 100%, rgba(255,209,102,0.28), transparent 70%); }

  .action-btn.meal{
    --btn-glow: rgba(247,168,96,0.7);
    --btn-glow-spread: rgba(247,168,96,0.2);
    border-color:rgba(247,168,96,0.55);
    color:#f7a860;
  }
  .action-btn.meal::after{
    background:#f7a860;
    box-shadow:0 0 10px 2px rgba(247,168,96,0.6), 0 0 25px 4px rgba(247,168,96,0.25);
    opacity:.9;
  }
  .action-btn.meal::before{ background:radial-gradient(ellipse at 50% 100%, rgba(247,168,96,0.28), transparent 70%); }

  .action-btn.exercise{
    --btn-glow: rgba(0,229,160,0.7);
    --btn-glow-spread: rgba(0,229,160,0.2);
    border-color:rgba(0,229,160,0.55);
    color:#00e5a0;
  }
  .action-btn.exercise::after{
    background:#00e5a0;
    box-shadow:0 0 10px 2px rgba(0,229,160,0.6), 0 0 25px 4px rgba(0,229,160,0.25);
    opacity:.9;
  }
  .action-btn.exercise::before{ background:radial-gradient(ellipse at 50% 100%, rgba(0,229,160,0.25), transparent 70%); }

  .action-btn.glucagon{
    --btn-glow: rgba(167,139,250,0.7);
    --btn-glow-spread: rgba(167,139,250,0.2);
    border-color:rgba(167,139,250,0.55);
    color:#a78bfa;
  }
  .action-btn.glucagon::after{
    background:#a78bfa;
    box-shadow:0 0 10px 2px rgba(167,139,250,0.6), 0 0 25px 4px rgba(167,139,250,0.25);
    opacity:.9;
  }
  .action-btn.glucagon::before{ background:radial-gradient(ellipse at 50% 100%, rgba(167,139,250,0.28), transparent 70%); }

  .action-btn.nothing{
    --btn-glow: rgba(100,116,139,0.5);
    --btn-glow-spread: rgba(100,116,139,0.12);
    border-color:rgba(100,116,139,0.35);
    color:#94a3b8;
  }
  .action-btn.nothing::after{
    background:#64748b;
    box-shadow:0 0 8px 1px rgba(100,116,139,0.4), 0 0 18px 2px rgba(100,116,139,0.15);
    opacity:.7;
  }
  .action-btn.nothing::before{ background:radial-gradient(ellipse at 50% 100%, rgba(100,116,139,0.2), transparent 70%); }

  .action-btn.recheck{
    --btn-glow: rgba(148,163,184,0.5);
    --btn-glow-spread: rgba(148,163,184,0.12);
    border-color:rgba(148,163,184,0.35);
    color:#94a3b8;
  }
  .action-btn.recheck::after{
    background:#94a3b8;
    box-shadow:0 0 8px 1px rgba(148,163,184,0.4), 0 0 18px 2px rgba(148,163,184,0.15);
    opacity:.7;
  }
  .action-btn.recheck::before{ background:radial-gradient(ellipse at 50% 100%, rgba(148,163,184,0.2), transparent 70%); }

  /* Cooldown state — dim glow */
  .action-btn.on-cooldown::after{ opacity:.2; }
  .action-btn.on-cooldown::before{ opacity:0; }

}
/* END large-screen button panel */

@media(min-width:1024px){
  #game{height:100dvh;}
  /* #controls gap/padding handled by large-screen button panel block above */
  .dial-box{width:min(520px,88vw);}
}

/* ── ULTRA-WIDE (1440px+): cap content width ── */
@media(min-width:1440px){
  #hud{max-width:1400px;margin:0 auto;width:100%;}
  #dashboard{max-width:1400px;margin:0 auto;width:100%;}
  #controls{max-width:1400px;margin:0 auto;width:100%;}
  .scenario-cards{max-width:1400px;}
}

/* ── Phone landscape orientation: tighter vertical space ── */
@media(max-height:500px) and (orientation:landscape){
  #hud{min-height:36px;padding:.22rem .8rem;}
  #timer-display{font-size:1rem;}
  #dashboard{padding:.22rem .7rem;}
  #glucose-value{font-size:1.7rem;}
  #trend-arrow{font-size:1.2rem;}
  .dash-label{display:none;}
  #controls{padding:.25rem .6rem;gap:.25rem;}
  .action-btn{padding:.3rem .15rem .25rem;font-size:.68rem;}
  .btn-icon{font-size:.8rem;}
  /* speech-bubble top removed */
  .doctor-sprite{width:48px;height:48px;}
  .bubble-box{font-size:.9rem;padding:.55rem .8rem;}
}

/* ── GI Selector ── */
.meal-gi-wrap{ position:relative; display:flex; flex-direction:column; gap:4px; }
.gi-chips{
  display:flex; gap:3px; justify-content:center;
}
.gi-chip{
  font-size:.72rem; font-family:var(--mono);
  padding:2px 6px; border-radius:6px; cursor:pointer;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  color:rgba(200,220,240,0.55);
  transition:all .18s; white-space:nowrap;
  user-select:none;
}
.gi-chip:hover{ background:rgba(255,255,255,0.12); color:rgba(200,220,240,0.9); }
.gi-chip.selected[data-gi="fast"]  { background:rgba(255,153,102,0.25); border-color:#ff9966; color:#ff9966; }
.gi-chip.selected[data-gi="medium"]{ background:rgba(247,168,96,0.25);  border-color:#f7a860; color:#f7a860; }
.gi-chip.selected[data-gi="slow"]  { background:rgba(102,204,136,0.25); border-color:#66cc88; color:#66cc88; }

.fb-gi-hint{
  font-family:var(--mono); font-size:.78rem;
  color:rgba(200,220,240,0.65);
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:8px; padding:0.5rem 0.8rem;
  margin:0.4rem 0; line-height:1.5;
}

/* ── Physiological countermeasure badges — HUD integrated ──────────────── */
.phys-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  border-left: 2px solid #ccc;
  border-radius: 5px;
  padding: 3px 7px 3px 5px;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.3;
  color: #d0dde8;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.3s ease, transform 0.3s ease;
  position: relative;
}
.phys-badge.show {
  opacity: 1;
  transform: scale(1);
  animation: physBadgeAlert 2.4s ease-out forwards;
}
.phys-badge.fade { opacity: 0; transform: scale(0.85); }
@keyframes physBadgeAlert {
  0%   { box-shadow: 0 0 0px 0px currentColor; }
  20%  { box-shadow: 0 0 8px 3px var(--badge-glow, rgba(100,181,246,0.7)); }
  60%  { box-shadow: 0 0 5px 2px var(--badge-glow, rgba(100,181,246,0.4)); }
  100% { box-shadow: 0 0 0px 0px transparent; }
}
.phys-badge-icon { font-size: 13px; }
.phys-badge-title { font-weight: 700; letter-spacing: 0.4px; }
/* Tooltip on hover */
.phys-badge-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  max-width: 240px;
  background: rgba(4,10,24,0.97);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 10.5px;
  line-height: 1.5;
  color: #c8d8e8;
  z-index: 50;
  pointer-events: none;
  white-space: normal;
}
.phys-badge:hover .phys-badge-tooltip { display: block; }
.phys-badge-tooltip-action { color: #b0c4de; margin-bottom: 3px; }
.phys-badge-tooltip-t1d    { color: #ff9a7a; font-style: italic; }


/* ── RTL layout overrides ─────────────────────────────────────── */
[dir="rtl"] body { font-family: 'Syne', 'Segoe UI', Tahoma, sans-serif; }
[dir="rtl"] #hud { direction: rtl; }
[dir="rtl"] .hud-left  { flex-direction: row-reverse; }
[dir="rtl"] .hud-right { flex-direction: row-reverse; }
[dir="rtl"] #controls  { direction: rtl; }
[dir="rtl"] .feedback-box { direction: rtl; text-align: right; }
[dir="rtl"] .fb-header { flex-direction: row-reverse; }
[dir="rtl"] .fb-stats  { direction: rtl; }
[dir="rtl"] .setting-row { flex-direction: row-reverse; }
[dir="rtl"] #action-log { direction: rtl; text-align: right; }
[dir="rtl"] #speech-bubble { direction: rtl; text-align: right; }
[dir="rtl"] #encounter-card { direction: rtl; }
[dir="rtl"] .enc-choices { direction: rtl; }
[dir="rtl"] .phys-badge { border-left: none; border-right: 2px solid #ccc; }
[dir="rtl"] .phys-badge-tooltip { right: 0; left: auto; }
[dir="rtl"] #fb-fail-reason { border-left: none; border-right: 2px solid #ff6b6b; }
[dir="rtl"] .briefing-card { direction: rtl; text-align: right; }
/* Locale switcher */
.locale-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 5px; font-size: .9rem;
  padding: 2px 5px; cursor: pointer;
  transition: all .15s; opacity: 0.5;
}
.locale-btn.active { opacity: 1; border-color: rgba(0,229,160,0.6); }
.locale-btn:hover  { opacity: 0.85; }
/* ── Notification zone — occupies 400→180 mg/dL space ───────────────────── */
#notif-zone {
  position: absolute;
  top: 2%;
  left: 21%;            /* start just right of the body figure (~18% wide) */
  right: 1%;
  height: 57%;
  z-index: 37;          /* above CRISIS overlay (36) */
  pointer-events: none;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  overflow: hidden;
  padding: 0;
}
/* LEFT column: Dr Glucose speech bubble */
#speech-bubble {
  flex: 0 0 min(320px, 48%);
  align-self: center;   /* vertically centered in zone */
}
/* RIGHT column: Notifications (prompt rail + action log) */
#notif-left {
  flex: 0 0 min(340px, 45%);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;  /* Start from top, scroll if needed */
  gap: 8px;
  align-self: center;
  max-height: 75%;      /* Leave some margin */
  min-height: 80px;     /* Prevent collapse when empty */
  overflow-y: auto;     /* Scroll if too many notifications */
  scrollbar-width: thin;
  scrollbar-color: rgba(0,229,160,0.3) transparent;
}
#notif-left::-webkit-scrollbar {
  width: 4px;
}
#notif-left::-webkit-scrollbar-thumb {
  background: rgba(0,229,160,0.3);
  border-radius: 2px;
}

/* speech-bubble rules consolidated above */

.doctor-sprite {
  width: 28px; height: 28px; flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0,229,160,0.25));
}
.bubble-box {
  background: rgba(4,10,24,0.92);
  border: 1.5px solid var(--safe);
  border-radius: 10px;
  padding: .5rem .75rem;
  font-family: var(--mono);
  font-size: clamp(.62rem, 1.4vw, .78rem);
  line-height: 1.5;
  color: #e0f8ef;
  position: relative;
  box-shadow: 0 4px 20px rgba(0,229,160,0.12);
  flex: 1;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
  box-sizing: border-box;
}
.bubble-box.urgent { border-color: #ff6b6b; color: #ffd0d0; }
.bubble-box.warn   { border-color: #ffd166; color: #fff3d0; }

/* Prompt rail — stacks below speech bubble inside notif-zone */

.prompt-card {
  background: rgba(4,10,24,0.85);
  border-radius: 7px;
  border-left: 3px solid #ffd166;
  padding: .28rem .55rem .28rem .45rem;
  font-family: var(--mono);
  font-size: clamp(.58rem, 1.6vw, .72rem);
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
  width: 100%;
  box-sizing: border-box;
  backdrop-filter: blur(6px);
  transform: translateX(0);
  transition: opacity .4s, transform .4s;
  position: relative;
  overflow: hidden;
}



/* ── Intro screen language selector ─────────────────────────────────────── */
#menu-audio-prefs {
  display: flex;
  gap: 1.4rem;
  margin-bottom: 1.4rem;
  justify-content: center;
  font-family: var(--mono);
  font-size: .82rem;
  color: rgba(200,220,240,0.65);
}
#intro-locale {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  margin: .8rem 0 1rem;
}
.intro-locale-label {
  font-family: var(--mono);
  font-size: .72rem;
  color: rgba(200,220,240,0.4);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.intro-locale-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
}
.intro-locale-btn {
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  font-size: 1.05rem;
  padding: .35rem .65rem;
  cursor: pointer;
  color: rgba(200,220,240,0.65);
  font-family: var(--mono);
  letter-spacing: .5px;
  transition: all .15s;
  min-width: 3.2rem;
  text-align: center;
}
.intro-locale-btn:hover {
  background: rgba(0,229,160,0.10);
  border-color: rgba(0,229,160,0.4);
  color: #e0f8ef;
}
.intro-locale-btn.active {
  background: rgba(0,229,160,0.14);
  border-color: rgba(0,229,160,0.7);
  color: #00e5a0;
  box-shadow: 0 0 10px rgba(0,229,160,0.18);
}


/* Inline animation from tutorial overlay */
    <style>
      @keyframes tutSlideDown {
        from { opacity:0; transform:translateY(-20px); }
        to { opacity:1; transform:translateY(0); }
      }
    </style>