/* ============================================================
   Magic Garden Kiosk — Hub Map + Doctor Profile Styles (Step 3)
   ============================================================ */

/* ── Hub Scene Container ─────────────────────────────────── */
#hub-scene {
  position: fixed;
  inset: 0;
  z-index: 8500;
  font-family: 'Nunito', 'Comic Sans MS', cursive, sans-serif;
  overflow: hidden;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.34,1.2,0.64,1);
}
#hub-scene.hub-hidden  { opacity:0; pointer-events:none; transform:scale(0.97); visibility:hidden; }
#hub-scene.hub-visible { opacity:1; pointer-events:auto; transform:scale(1);   visibility:visible; }

/* Re-declare sunPulse locally (also defined in kiosk.css) */
@keyframes sunPulse {
  0%,100% { box-shadow:0 0 0 16px rgba(255,220,50,0.18),0 0 0 32px rgba(255,220,50,0.09); }
  50%     { box-shadow:0 0 0 24px rgba(255,220,50,0.24),0 0 0 48px rgba(255,220,50,0.12); }
}

/* ── Sky ─────────────────────────────────────────────────── */
.hub-sky {
  position:absolute; top:0; left:0; right:0; height:58%;
  background:linear-gradient(180deg,#4EADEB 0%,#96D4F5 55%,#C8EEFF 100%);
  overflow:hidden;
}
.hub-sun {
  position:absolute; top:6%; right:8%;
  width:100px; height:100px;
  background:radial-gradient(circle,#FFE566 55%,#FFD700 100%);
  border-radius:50%;
  box-shadow:0 0 0 16px rgba(255,220,50,0.18),0 0 0 32px rgba(255,220,50,0.09);
  animation:sunPulse 4s ease-in-out infinite;
}
.hub-cloud {
  position:absolute; background:#fff; border-radius:50px; opacity:0.88;
}
.hub-cloud::before,.hub-cloud::after { content:''; position:absolute; background:#fff; border-radius:50%; }
.hc-1 { width:150px;height:46px;top:14%;left:-200px; animation:hubCloudDrift 30s linear infinite; }
.hc-1::before{width:65px;height:65px;top:-28px;left:18px;}
.hc-1::after {width:48px;height:48px;top:-18px;left:66px;}
.hc-2 { width:200px;height:58px;top:30%;left:-260px; animation:hubCloudDrift 42s linear infinite 10s; }
.hc-2::before{width:84px;height:84px;top:-38px;left:28px;}
.hc-2::after {width:64px;height:64px;top:-26px;left:96px;}
.hc-3 { width:120px;height:38px;top:8%;left:-170px; animation:hubCloudDrift 36s linear infinite 18s; }
.hc-3::before{width:50px;height:50px;top:-22px;left:16px;}
.hc-3::after {width:38px;height:38px;top:-14px;left:54px;}
@keyframes hubCloudDrift { 0%{transform:translateX(0)} 100%{transform:translateX(calc(100vw + 320px))} }

.hub-bird { position:absolute; font-size:24px; animation:hubBirdFly linear infinite; opacity:.8; }
.hb-1 { top:16%; left:-50px; animation-duration:24s; animation-delay:2s; }
.hb-2 { top:34%; left:-50px; animation-duration:32s; animation-delay:14s; font-size:20px; }
@keyframes hubBirdFly {
  0%  {transform:translateX(0) translateY(0);}
  30% {transform:translateX(30vw) translateY(-18px);}
  60% {transform:translateX(60vw) translateY(6px);}
  100%{transform:translateX(110vw) translateY(0);}
}

/* ── Hills ───────────────────────────────────────────────── */
.hub-hills { position:absolute; bottom:22%; left:0; right:0; height:220px; pointer-events:none; }
.hub-hill  { position:absolute; bottom:0; border-radius:50% 50% 0 0; }
.hh-l { width:52%;height:170px;left:-10%;  background:linear-gradient(180deg,#7ACE4C 0%,#58A632 100%); }
.hh-r { width:48%;height:145px;right:-6%; background:linear-gradient(180deg,#6EC845 0%,#4E9C2C 100%); }
.hh-c { width:42%;height:195px;left:30%;  background:linear-gradient(180deg,#83D452 0%,#5CB136 100%); }

/* ── Ground strip ────────────────────────────────────────── */
.hub-ground-strip {
  position:absolute; bottom:0; left:0; right:0; height:24%;
  background:linear-gradient(180deg,#8DD44A 0%,#5DAA2E 60%,#4A8A24 100%);
  border-top:5px solid #6EC240;
}

/* ── Path SVG ────────────────────────────────────────────── */
.hub-path-svg {
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:1;
}

/* ── Ambient sprites ─────────────────────────────────────── */
.hub-ambient {
  position:absolute; pointer-events:none; z-index:2;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,0.2));
}
/* Trees */
.ha-tree1  { font-size:clamp(60px,8vw,120px);  bottom:22%; left:0%;   animation:treeSway 4s ease-in-out infinite; transform-origin:bottom center; }
.ha-tree2  { font-size:clamp(50px,7vw,100px);  bottom:22%; right:0%;  animation:treeSway 4s ease-in-out infinite 1.2s; transform-origin:bottom center; }
.ha-tree3  { font-size:clamp(55px,7.5vw,110px);bottom:22%; left:22%;  animation:treeSway 4s ease-in-out infinite 0.7s; transform-origin:bottom center; }
.ha-tree4  { font-size:clamp(50px,6.5vw,95px); bottom:22%; right:20%; animation:treeSway 4s ease-in-out infinite 2s; transform-origin:bottom center; }
/* Flowers */
.ha-flower1{ font-size:clamp(22px,2.8vw,42px); bottom:23%; left:8%;   animation:sway 2.5s ease-in-out infinite; transform-origin:bottom center; }
.ha-flower2{ font-size:clamp(22px,2.8vw,42px); bottom:23%; left:34%;  animation:sway 2.5s ease-in-out infinite 0.4s; transform-origin:bottom center; }
.ha-flower3{ font-size:clamp(22px,2.8vw,42px); bottom:23%; left:60%;  animation:sway 2.5s ease-in-out infinite 0.9s; transform-origin:bottom center; }
.ha-flower4{ font-size:clamp(22px,2.8vw,42px); bottom:23%; right:10%; animation:sway 2.5s ease-in-out infinite 1.3s; transform-origin:bottom center; }
.ha-flower5{ font-size:clamp(22px,2.8vw,42px); bottom:23%; left:48%;  animation:sway 2.5s ease-in-out infinite 0.6s; transform-origin:bottom center; }
/* Bushes */
.ha-bush1  { font-size:clamp(18px,2.2vw,34px); bottom:23%; left:16%;  animation:sway 3s ease-in-out infinite 0.3s; transform-origin:bottom center; }
.ha-bush2  { font-size:clamp(18px,2.2vw,34px); bottom:23%; right:30%; animation:sway 3s ease-in-out infinite 1.1s; transform-origin:bottom center; }
/* Snail */
.ha-snail  { font-size:clamp(20px,2.5vw,36px); bottom:23%; left:-40px; animation:snailCrawl 60s linear infinite; }
/* Bee */
.ha-bee    { font-size:clamp(18px,2.2vw,30px); top:42%; left:35%; animation:beeDrift 8s ease-in-out infinite; }
/* Butterflies */
.ha-butterfly1 { font-size:clamp(20px,2.5vw,36px); top:38%; left:18%; animation:butterflyFloat 12s linear infinite; }
.ha-butterfly2 { font-size:clamp(18px,2.2vw,30px); top:55%; left:66%; animation:butterflyFloat 15s linear infinite 5s; }

@keyframes treeSway   { 0%,100%{transform:rotate(-1.5deg)} 50%{transform:rotate(1.5deg)} }
@keyframes sway       { 0%,100%{transform:rotate(-4deg)}   50%{transform:rotate(4deg)}   }
@keyframes snailCrawl { 0%{left:-40px} 100%{left:calc(100% + 40px)} }
@keyframes beeDrift   { 0%,100%{transform:translate(0,0) rotate(0deg)} 25%{transform:translate(30px,-20px) rotate(15deg)} 75%{transform:translate(-20px,15px) rotate(-10deg)} }
@keyframes butterflyFloat {
  0%  {transform:translate(0,0)   scaleX(1);}
  20% {transform:translate(40px,-25px) scaleX(1);}
  40% {transform:translate(80px,10px)  scaleX(-1);}
  60% {transform:translate(40px,-15px) scaleX(-1);}
  80% {transform:translate(-20px,5px)  scaleX(1);}
  100%{transform:translate(0,0)   scaleX(1);}
}

/* ── Doctor nodes ────────────────────────────────────────── */
.hub-nodes { position:absolute; inset:0; z-index:5; pointer-events:none; }
.hub-node  {
  position:absolute;
  pointer-events:auto;
  cursor:pointer;
  transform:translate(-50%,-50%);
  opacity:0;
}
.hub-node-enter {
  animation:nodeEntrance 0.55s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes nodeEntrance {
  0%  {opacity:0; transform:translate(-50%,-50%) scale(0.4) rotate(-8deg);}
  100%{opacity:1; transform:translate(-50%,-50%) scale(1)   rotate(0deg);}
}

.hub-node-inner {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transition:transform 0.18s cubic-bezier(0.34,1.56,0.64,1), filter 0.18s;
  position:relative; /* needed for .hub-node-visited absolute positioning */
}
.hub-node:hover .hub-node-inner,
.hub-node:active .hub-node-inner {
  transform:scale(1.15);
  filter:drop-shadow(0 8px 18px rgba(0,0,0,0.3));
}
.hub-node:active .hub-node-inner { transform:scale(0.97); }

/* House */
.hub-node-house {
  position:relative; width:clamp(72px,9vw,130px); height:clamp(60px,8vw,110px);
  display:flex; flex-direction:column; align-items:center;
}
.hub-house-roof {
  width:0; height:0;
  border-left:clamp(38px,4.8vw,68px) solid transparent;
  border-right:clamp(38px,4.8vw,68px) solid transparent;
  border-bottom:clamp(26px,3.4vw,48px) solid #E53935; /* overridden inline */
  filter:drop-shadow(0 -2px 4px rgba(0,0,0,0.15));
}
.hub-house-body {
  width:clamp(58px,7.5vw,108px); height:clamp(36px,4.8vw,68px);
  border-radius:4px 4px 8px 8px;
  border:3px solid #E53935;  /* overridden inline */
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,0.18);
  position:relative;
}
.hub-house-icon { font-size:clamp(20px,2.8vw,40px); }
.hub-house-glow {
  position:absolute; inset:-20px; border-radius:50%;
  pointer-events:none; z-index:-1;
  animation:houseGlow 2.5s ease-in-out infinite;
}
@keyframes houseGlow { 0%,100%{opacity:0.5;transform:scale(1)} 50%{opacity:0.9;transform:scale(1.15)} }

/* Ensure minimum touch target (toddler-friendly 80×80px) */
.hub-node { min-width:80px; min-height:80px; }

/* Badge */
.hub-node-badge {
  background:rgba(255,255,255,0.95);
  border-radius:20px; padding:4px 12px;
  text-align:center;
  box-shadow:0 3px 10px rgba(0,0,0,0.15);
  max-width:clamp(110px,13vw,190px);
}
.hub-node-name {
  display:block; font-size:clamp(11px,1.3vw,18px); font-weight:900; color:#2D4A1E;
  white-space:nowrap;
}
.hub-node-spec {
  display:block; font-size:clamp(9px,1vw,14px); font-weight:700;
}
.hub-node-spot {
  font-size:clamp(9px,0.95vw,13px); color:rgba(255,255,255,0.9);
  background:rgba(0,0,0,0.28); border-radius:10px; padding:2px 8px;
  white-space:nowrap;
}

/* Visited checkmark badge */
.hub-node-visited {
  position:absolute;
  top:-8px; right:-8px;
  width:28px; height:28px;
  background:#4CAF50;
  color:#fff;
  border-radius:50%;
  font-size:16px; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,0.25);
  border:2px solid #fff;
  animation:visitedPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
  z-index:10;
}
@keyframes visitedPop {
  0%  { transform:scale(0) rotate(-20deg); opacity:0; }
  100%{ transform:scale(1) rotate(0deg);   opacity:1; }
}
/* (position:relative already declared in the main .hub-node-inner rule above) */

/* ── Firefly canvas ──────────────────────────────────────── */
/* z-index:3 so it sits BELOW doctor nodes (z-index:5) */
.hub-firefly-canvas {
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:3;
}

/* ── Top bar ─────────────────────────────────────────────── */
.hub-topbar {
  position:absolute; top:0; left:0; right:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px 10px;
  background:linear-gradient(180deg,rgba(0,0,0,0.22) 0%,transparent 100%);
}
.hub-back-btn {
  background:rgba(255,255,255,0.9);
  border:3px solid #4CAF50; border-radius:50px;
  padding:10px 24px;
  font-family:'Nunito',cursive; font-size:clamp(13px,1.6vw,20px); font-weight:900; color:#2E7D32;
  cursor:pointer;
  box-shadow:0 4px 0 #388E3C;
  transition:transform .12s, box-shadow .12s;
}
.hub-back-btn:hover  { transform:translateY(-2px); box-shadow:0 6px 0 #388E3C; }
.hub-back-btn:active { transform:translateY(2px);  box-shadow:0 2px 0 #388E3C; }

.hub-title-pill {
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.88); border-radius:50px; padding:8px 24px;
  font-size:clamp(15px,2vw,26px); font-weight:900; color:#2D4A1E;
  box-shadow:0 4px 16px rgba(0,0,0,0.14);
}

.hub-topbar-spacer { width: clamp(80px, 10vw, 140px); }

/* ── Games title label in strip ────────────────────────────── */
.hub-games-title {
  font-size: clamp(12px, 1.4vw, 18px);
  font-weight: 900;
  color: #2D4A1E;
  white-space: nowrap;
  padding-right: 6px;
  border-right: 2px solid rgba(76,175,80,.35);
  margin-right: 4px;
}

/* ── Fairy guide ─────────────────────────────────────────── */
.hub-fairy {
  position:absolute; bottom:28%; right:3%; z-index:8;
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
  cursor:pointer;
  animation:fairyFloat 3s ease-in-out infinite;
  transition:opacity 0.4s, transform 0.4s;
}
.hub-fairy.hub-fairy-dismissed { opacity:0; pointer-events:none; transform:scale(0.5) translateY(20px); }
@keyframes fairyFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

.hub-fairy-sprite { font-size:clamp(40px,6vw,88px); filter:drop-shadow(0 4px 8px rgba(0,0,0,0.2)); }
.hub-fairy-bubble {
  background:rgba(255,255,255,0.96);
  border-radius:20px 20px 4px 20px;
  padding:14px 18px;
  max-width:260px;
  box-shadow:0 6px 24px rgba(0,0,0,0.18);
  animation:bubbleBounce 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.4s both;
}
@keyframes bubbleBounce { 0%{opacity:0;transform:scale(0.6) translateY(10px)} 100%{opacity:1;transform:scale(1) translateY(0)} }
.hub-fairy-bubble p {
  margin:0; font-size:clamp(12px,1.4vw,18px); font-weight:700; color:#2D4A1E; line-height:1.5;
}

/* ══════════════════════════════════════════════════════════
   DOCTOR PROFILE
   ══════════════════════════════════════════════════════════ */
#doctor-profile {
  position:fixed; inset:0; z-index:9000;
  font-family:'Nunito','Comic Sans MS',cursive,sans-serif;
  overflow:hidden;
  transition:opacity 0.45s ease, transform 0.45s cubic-bezier(0.25,1,0.5,1);
}
#doctor-profile.dp-hidden  { opacity:0; pointer-events:none; transform:translateX(4%) scale(0.98); visibility:hidden; }
#doctor-profile.dp-visible { opacity:1; pointer-events:auto; transform:translateX(0) scale(1);   visibility:visible; }

/* Dynamic BG */
.dp-bg {
  position:absolute; inset:0; z-index:0;
  transition:background 0.5s ease;
}

/* Garden decorations */
.dp-bg-garden {
  position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden;
}
.dp-garden-hill {
  position:absolute; bottom:0; border-radius:50% 50% 0 0;
}
.dh-l { width:55%;height:180px; left:-8%;  background:linear-gradient(180deg,#7ACE4C,#56A42F); opacity:.35; }
.dh-r { width:48%;height:150px; right:-6%; background:linear-gradient(180deg,#6EC845,#4C9A2A); opacity:.35; }
.dp-amb { position:absolute; pointer-events:none; opacity:.55; }
.dp-tree1    { font-size:clamp(50px,7vw,100px); bottom:0;   left:0;   animation:treeSway 4s ease-in-out infinite;     transform-origin:bottom center; }
.dp-tree2    { font-size:clamp(45px,6vw,85px);  bottom:0;   right:0;  animation:treeSway 4s ease-in-out infinite 1s;  transform-origin:bottom center; }
.dp-flower1  { font-size:clamp(18px,2.2vw,32px);bottom:1%; left:8%;  animation:sway 2.5s ease-in-out infinite;        transform-origin:bottom center; }
.dp-flower2  { font-size:clamp(18px,2.2vw,32px);bottom:1%; right:6%; animation:sway 2.5s ease-in-out infinite .5s;   transform-origin:bottom center; }
.dp-butterfly{ font-size:clamp(18px,2.2vw,32px);top:30%;   left:4%;  animation:butterflyFloat 12s linear infinite; }

/* Top bar */
.dp-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px 8px;
  background: linear-gradient(180deg,rgba(0,0,0,0.18) 0%,transparent 100%);
}
.dp-back-btn {
  background: rgba(255,255,255,0.9); border: 3px solid #4CAF50; border-radius: 50px;
  padding: 8px 20px;
  font-family: 'Nunito',cursive; font-size: clamp(12px,1.5vw,18px); font-weight: 900; color: #2E7D32;
  cursor: pointer; box-shadow: 0 4px 0 #388E3C;
  transition: transform .12s, box-shadow .12s;
  white-space: nowrap;
}
.dp-back-btn:hover  { transform: translateY(-2px); box-shadow: 0 6px 0 #388E3C; }
.dp-back-btn:active { transform: translateY(2px);  box-shadow: 0 2px 0 #388E3C; }

.dp-topbar-pill {
  display: flex; align-items: center; gap: 8px;
  border-radius: 50px; padding: 7px 20px;
  font-size: clamp(12px,1.5vw,20px); font-weight: 900; color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  transition: background 0.4s;
}
.dp-topbar-sep { opacity: .6; }
.dp-topbar-spacer { width: clamp(100px, 12vw, 160px); }

/* Main card layout — full-height flex, topbar offset via padding */
.dp-card-wrap {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: stretch;
  padding: 76px 28px 20px;
  gap: clamp(12px, 2vw, 32px);
  overflow: hidden;
}

/* ── LEFT column ─────────────────────────────────────────── */
.dp-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  width: clamp(160px, 22vw, 300px);
  position: relative;
  z-index: 2;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #4CAF50 transparent;
  padding-bottom: 8px;
}
.dp-left::-webkit-scrollbar { width: 4px; }
.dp-left::-webkit-scrollbar-thumb { background: #4CAF50; border-radius: 10px; }

.dp-portrait-frame {
  position: relative;
  width: 100%;
  /* portrait takes up to 42% of viewport height */
  max-height: clamp(160px, 42vh, 460px);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,0.22);
  animation: portraitPop .6s cubic-bezier(0.34,1.56,0.64,1) both;
  flex-shrink: 0;
}
@keyframes portraitPop { 0%{opacity:0;transform:scale(0.7) translateY(20px)} 100%{opacity:1;transform:scale(1) translateY(0)} }
.dp-portrait-bg  { position: absolute; inset: 0; z-index: 0; }
.dp-portrait-img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: clamp(160px, 42vh, 460px);
  object-fit: contain;
  object-position: bottom center;
  display: block;
  animation: portraitFloat 4s ease-in-out infinite;
}
@keyframes portraitFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.dp-portrait-glow {
  position: absolute; inset: -10px; border-radius: 28px;
  pointer-events: none; z-index: 2;
  opacity: .6;
  animation: portraitGlow 3s ease-in-out infinite;
}
@keyframes portraitGlow { 0%,100%{opacity:.4} 50%{opacity:.8} }

.dp-garden-spot {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: clamp(10px, 1.1vw, 15px); font-weight: 900;
  border-radius: 20px; padding: 4px 12px;
  white-space: nowrap; z-index: 3;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* Specialty + hobby badges */
.dp-specialty-badge, .dp-hobby-badge {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 3px solid #ccc; border-radius: 14px;
  padding: 8px 14px; width: 100%;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
  animation: slideInLeft .4s ease both;
  flex-shrink: 0;
}
.dp-hobby-badge { animation-delay: .1s; }
@keyframes slideInLeft { 0%{opacity:0;transform:translateX(-20px)} 100%{opacity:1;transform:translateX(0)} }
.dp-spec-icon, .dp-hobby-icon { font-size: clamp(20px, 2.5vw, 34px); }
.dp-spec-label, .dp-hobby-label {
  font-size: clamp(8px, 0.9vw, 12px); font-weight: 700; color: #888;
  text-transform: uppercase; letter-spacing: .8px;
}
.dp-spec-name, .dp-hobby-name {
  font-size: clamp(12px, 1.3vw, 18px); font-weight: 900; color: #2D4A1E;
}

/* ── RIGHT column — scrollable, fills remaining height ────── */
.dp-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  z-index: 2;
  padding-right: 6px;
  padding-bottom: 16px;
  /* custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: #4CAF50 transparent;
}
.dp-right::-webkit-scrollbar { width: 5px; }
.dp-right::-webkit-scrollbar-thumb { background: #4CAF50; border-radius: 10px; }

/* Hero */
.dp-hero {
  background: rgba(255,255,255,0.88); border-radius: 18px; padding: 14px 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  opacity: 0;
  flex-shrink: 0;
}
.dp-section-enter { animation: sectionFadeUp .45s ease forwards; }
@keyframes sectionFadeUp { 0%{opacity:0;transform:translateY(16px)} 100%{opacity:1;transform:translateY(0)} }

.dp-hero-name {
  font-size: clamp(22px, 3.2vw, 50px); font-weight: 900; margin: 0 0 2px;
  line-height: 1.05;
}
.dp-hero-spec {
  font-size: clamp(13px, 1.6vw, 22px); font-weight: 700; margin: 0;
  opacity: .85;
}

/* Sections */
.dp-section {
  background: rgba(255,255,255,0.88); border-radius: 16px;
  padding: 13px 18px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.09);
  opacity: 0;
  flex-shrink: 0;
}
.dp-section-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.dp-section-icon  { font-size: clamp(16px, 2vw, 26px); }
.dp-section-title { font-size: clamp(12px, 1.4vw, 19px); font-weight: 900; color: #2D4A1E; }
.dp-section-body  { font-size: clamp(12px, 1.4vw, 18px); font-weight: 700; color: #4E342E; margin: 0; line-height: 1.5; }

/* Fun fact box */
.dp-fact-box {
  border-radius: 18px; padding: 14px 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  opacity: 0;
  overflow: visible;   /* allow reveal to expand naturally */
  position: relative;
  flex-shrink: 0;
}
.dp-fact-box::before {
  content: '✨✨✨';
  position: absolute; top: 8px; right: 12px;
  font-size: 16px; opacity: .5;
  animation: sparkleRot 3s linear infinite;
}
@keyframes sparkleRot { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

.dp-fact-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.dp-fact-star  { font-size: clamp(14px, 1.8vw, 24px); animation: starSpin 2s linear infinite; }
@keyframes starSpin { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
.dp-fact-title { font-size: clamp(13px, 1.6vw, 22px); font-weight: 900; color: #fff; flex: 1; text-align: center; }

.dp-fact-teaser {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.22); border-radius: 12px; padding: 8px 12px;
  margin-bottom: 10px;
}
.dp-fact-teaser em { font-size: clamp(12px, 1.4vw, 18px); font-weight: 700; color: #fff; font-style: normal; }

.dp-fact-btn {
  display: block; width: 100%;
  background: rgba(255,255,255,0.95); border: none; border-radius: 50px;
  padding: 10px 18px;
  font-family: 'Nunito',cursive; font-size: clamp(12px, 1.5vw, 20px); font-weight: 900; color: #4E342E;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0,0,0,0.2);
  transition: transform .12s, box-shadow .12s;
}
.dp-fact-btn:hover  { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0,0,0,0.2); }
.dp-fact-btn:active { transform: translateY(2px);  box-shadow: 0 2px 0 rgba(0,0,0,0.2); }

.dp-fact-reveal {
  background: rgba(255,255,255,0.96); border-radius: 14px;
  display: flex; align-items: center; gap: 12px;
  margin-top: 0;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.5s cubic-bezier(0.34,1.2,0.64,1), opacity 0.4s ease, padding 0.4s, margin-top 0.3s;
  padding: 0 16px;
}
.dp-fact-reveal.dp-fact-shown {
  max-height: 160px; opacity: 1;
  padding: 14px 16px;
  margin-top: 8px;
}
.dp-fact-visual-icon { font-size: clamp(24px, 3.2vw, 46px); flex-shrink: 0; }
.dp-fact-visual-text { font-size: clamp(11px, 1.3vw, 17px); font-weight: 700; color: #4E342E; margin: 0; line-height: 1.5; }

/* ══════════════════════════════════════════════════════════
   DOCTOR PROFILE — RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════════════════════ */

/* ── Tablet (≤900px): slightly tighten proportions ────────── */
@media (max-width: 900px) {
  .dp-card-wrap {
    padding: 68px 18px 16px;
    gap: 14px;
  }
  .dp-left {
    width: clamp(140px, 28vw, 220px);
    gap: 8px;
  }
  .dp-portrait-frame,
  .dp-portrait-img {
    max-height: clamp(140px, 36vh, 320px);
  }
  .dp-hero { padding: 12px 16px; }
  .dp-section { padding: 11px 14px; }
  .dp-fact-box { padding: 12px 14px; }
  .dp-hero-name { font-size: clamp(20px, 4vw, 36px); }
  .dp-hero-spec { font-size: clamp(13px, 2vw, 18px); }
  .dp-section-body,
  .dp-section-title { font-size: clamp(12px, 1.8vw, 16px); }
  .dp-fact-title { font-size: clamp(13px, 2vw, 18px); }
  .dp-fact-teaser em { font-size: clamp(12px, 1.7vw, 15px); }
}

/* ── Small tablet / large phone landscape (≤767px) ─────────
   Switch to single-column stacked layout                    */
@media (max-width: 767px) {
  .dp-topbar {
    padding: 8px 14px 6px;
  }
  .dp-topbar-pill {
    padding: 6px 14px;
    font-size: 13px;
    gap: 5px;
  }
  .dp-topbar-sep { display: none; }  /* hide middle dot — saves space */
  /* hide the specialty in topbar pill on small screens */
  #dp-topbar-spec { display: none; }
  .dp-topbar-spacer { display: none; }
  .dp-back-btn { padding: 7px 14px; font-size: 13px; }

  /* Stack left + right vertically, left becomes a compact header row */
  .dp-card-wrap {
    flex-direction: column;
    align-items: stretch;
    padding: 60px 14px 16px;
    gap: 10px;
    overflow-y: auto;   /* outer scroll — one unified stream */
    overflow-x: hidden;
  }

  /* Left column: horizontal strip — portrait left, badges right */
  .dp-left {
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    overflow-y: visible;
    overflow-x: visible;
    flex-shrink: 0;
    padding-bottom: 0;
  }

  .dp-portrait-frame,
  .dp-portrait-img {
    width: clamp(90px, 26vw, 150px);
    max-height: clamp(110px, 30vw, 180px);
    flex-shrink: 0;
  }

  /* Stack specialty + hobby badges beside the portrait */
  .dp-specialty-badge,
  .dp-hobby-badge {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    gap: 8px;
  }
  /* Group the two badges in a vertical sub-column */
  .dp-left > .dp-specialty-badge,
  .dp-left > .dp-hobby-badge {
    align-self: stretch;
  }

  /* Right column: no height constraint — flows naturally */
  .dp-right {
    overflow-y: visible;
    overflow-x: visible;
    padding-right: 0;
    padding-bottom: 24px;
    gap: 8px;
  }

  .dp-hero { padding: 10px 14px; }
  .dp-hero-name { font-size: clamp(18px, 5.5vw, 28px); }
  .dp-hero-spec { font-size: clamp(12px, 3.5vw, 16px); }

  .dp-section { padding: 10px 12px; }
  .dp-section-title { font-size: 13px; }
  .dp-section-body  { font-size: 13px; line-height: 1.45; }

  .dp-fact-box { padding: 12px 14px; }
  .dp-fact-title { font-size: 14px; }
  .dp-fact-teaser em { font-size: 13px; }
  .dp-fact-btn { font-size: 13px; padding: 9px 14px; }
  .dp-fact-visual-text { font-size: 12px; }
  .dp-fact-visual-icon { font-size: 28px; }

  /* Simplify background decorations */
  .dp-tree1, .dp-tree2 { font-size: 40px; opacity: .3; }
  .dp-butterfly { display: none; }
}

/* ── Portrait phone (≤480px): maximise reading area ────────── */
@media (max-width: 480px) {
  .dp-topbar { padding: 6px 10px 5px; }
  .dp-back-btn { padding: 6px 12px; font-size: 12px; }
  .dp-topbar-pill { padding: 5px 10px; font-size: 12px; }

  .dp-card-wrap { padding: 52px 10px 14px; gap: 8px; }

  /* Even more compact portrait strip */
  .dp-portrait-frame,
  .dp-portrait-img {
    width: clamp(76px, 22vw, 110px);
    max-height: clamp(92px, 26vw, 140px);
  }
  .dp-garden-spot { font-size: 9px; padding: 3px 8px; }

  .dp-spec-icon, .dp-hobby-icon { font-size: 18px; }
  .dp-spec-label, .dp-hobby-label { font-size: 8px; }
  .dp-spec-name, .dp-hobby-name { font-size: 12px; }

  .dp-hero { padding: 8px 12px; }
  .dp-hero-name { font-size: clamp(16px, 6vw, 24px); }
  .dp-hero-spec { font-size: 12px; }

  .dp-section { padding: 8px 10px; }
  .dp-section-icon { font-size: 16px; }
  .dp-section-title { font-size: 12px; }
  .dp-section-body  { font-size: 12px; }

  .dp-fact-box { padding: 10px 12px; }
  .dp-fact-star { font-size: 14px; }
  .dp-fact-title { font-size: 13px; }
  .dp-fact-teaser { padding: 7px 10px; }
  .dp-fact-teaser em { font-size: 12px; }
  .dp-fact-btn { font-size: 12px; padding: 8px 12px; }

  /* Hide ambient garden overlays to reduce visual noise */
  .dh-l, .dh-r { opacity: .18; }
  .dp-flower1, .dp-flower2 { display: none; }
}