/* HealthyBound Quest Companion UI — 2026-09-15 */
:root{--vp-navy:#0b1425;--vp-panel:#111d33;--vp-panel2:#172642;--vp-pink:#e94988;--vp-purple:#a65cff;--vp-blue:#3aa4ff;--vp-green:#48d7a0;--vp-gold:#ffbf4b}
#vpDashboardCompanion,#vpMyDayCompanion{margin:18px 0}
.vpc-hero{position:relative;overflow:hidden;border:1px solid rgba(138,162,211,.25);border-radius:28px;background:radial-gradient(circle at 18% 20%,rgba(137,92,255,.28),transparent 31%),linear-gradient(135deg,#111b31,#0d172a 60%,#14233d);color:#f8fbff;box-shadow:0 24px 55px rgba(0,0,0,.22);padding:22px;display:grid;grid-template-columns:minmax(250px,.82fr) minmax(420px,1.5fr);gap:24px}
.vpc-character-pane{min-height:310px;border-radius:23px;position:relative;display:flex;align-items:flex-end;justify-content:center;padding:22px;background:radial-gradient(circle at 50% 25%,rgba(121,196,255,.32),transparent 26%),linear-gradient(180deg,rgba(76,71,145,.52),rgba(22,62,65,.55)),linear-gradient(140deg,#413768,#173c4c);overflow:hidden}
.vpc-character-pane:after{content:"";position:absolute;left:-5%;right:-5%;bottom:-18px;height:90px;background:radial-gradient(ellipse at center,#254a45 0,#152c31 52%,transparent 54%);opacity:.95}
.vpc-character{position:relative;z-index:2;font-size:9rem;filter:drop-shadow(0 18px 18px rgba(0,0,0,.28));transform:translateY(-16px);line-height:1}
.vpc-nameplate{position:absolute;z-index:3;left:18px;right:18px;bottom:15px;background:rgba(8,15,28,.88);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(12px);border-radius:18px;padding:12px 15px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.vpc-nameplate strong{font-size:1.28rem}.vpc-nameplate small{display:block;color:#e993ff;margin-top:3px}.vpc-edit{border:0;background:rgba(255,255,255,.08);color:#fff;border-radius:12px;padding:8px 11px;cursor:pointer}
.vpc-main{display:grid;align-content:start;gap:16px}.vpc-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.vpc-head h3{font-size:1.3rem;margin:0}.vpc-head p{margin:5px 0 0;color:#aebbd2}.vpc-change{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#f8fbff;border-radius:999px;padding:9px 14px;font-weight:800;cursor:pointer}
.vpc-rings{display:grid;grid-template-columns:repeat(4,minmax(90px,1fr));gap:14px}.vpc-ring-card{text-align:center}.vpc-ring{--p:0;--c:var(--vp-pink);width:88px;height:88px;margin:0 auto 8px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--c) calc(var(--p)*1%),rgba(255,255,255,.09) 0);position:relative}.vpc-ring:before{content:"";position:absolute;inset:8px;border-radius:50%;background:#111d33}.vpc-ring>span{position:relative;z-index:1;font-weight:900;font-size:1.02rem}.vpc-ring-card b{display:block}.vpc-ring-card small{color:#9fb0cb}.vpc-status{display:flex;align-items:center;gap:13px;background:linear-gradient(135deg,rgba(61,84,130,.5),rgba(42,62,103,.35));border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:15px 17px}.vpc-status-icon{font-size:1.7rem}.vpc-status strong{display:block}.vpc-status p{margin:3px 0 0;color:#d9e2f2}
.vpc-myday{display:grid;grid-template-columns:170px 1fr auto;align-items:center;gap:20px;padding:20px;border-radius:24px;background:linear-gradient(135deg,#111d33,#162844);border:1px solid rgba(138,162,211,.24);color:#fff;box-shadow:0 18px 45px rgba(0,0,0,.16)}.vpc-myday-char{text-align:center;font-size:6rem;line-height:1}.vpc-myday-char strong{display:block;font-size:1.05rem;margin-top:8px}.vpc-needs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.vpc-need{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:10px 12px}.vpc-need b{display:block;font-size:.8rem;color:#9fb0cb}.vpc-need span{font-weight:850}.vpc-myday-actions{display:grid;gap:8px}.vpc-myday-actions button{white-space:nowrap}
.vpc-modal{position:fixed;inset:0;background:rgba(2,7,15,.76);backdrop-filter:blur(8px);z-index:10000;display:grid;place-items:center;padding:20px}.vpc-modal.hidden{display:none}.vpc-dialog{width:min(720px,100%);max-height:90vh;overflow:auto;background:#101a2d;color:#fff;border:1px solid rgba(255,255,255,.13);border-radius:26px;padding:22px;box-shadow:0 30px 80px rgba(0,0,0,.45)}.vpc-dialog-head{display:flex;justify-content:space-between;align-items:center}.vpc-dialog h3{margin:0}.vpc-choices{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:20px 0}.vpc-choice{border:2px solid transparent;background:#17243b;color:#fff;border-radius:18px;padding:14px 8px;cursor:pointer;text-align:center}.vpc-choice.selected{border-color:#f05aa0;background:#241b3c}.vpc-choice span{display:block;font-size:3.4rem}.vpc-choice b{display:block;margin-top:7px}.vpc-name-field{display:grid;gap:7px;font-weight:800}.vpc-name-field input{background:#0b1425;color:#fff;border:1px solid #344866;border-radius:14px;padding:12px 14px;font-size:1rem}.vpc-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
/* Modernize existing plan/dashboard spacing without changing behavior */
.vp-top-grid{gap:20px!important}.vp-plan-card{padding:22px!important;border-radius:24px!important;background:linear-gradient(145deg,#151922,#191b23)!important;border:1px solid #343741!important}.vp-plan-items{gap:12px!important}.vp-plan-item{padding:15px!important;border-radius:18px!important;border:1px solid #d8d8dd!important;box-shadow:0 7px 18px rgba(0,0,0,.08)!important}.vp-plan-icon{width:48px!important;height:48px!important}.vp-card-header{gap:16px}.vp-card-header .text-btn{padding:7px 9px!important}.vp-day-summary{gap:14px!important;margin:18px 0 24px}.vp-day-stat{border-radius:18px!important}
@media(max-width:900px){.vpc-hero{grid-template-columns:1fr}.vpc-character-pane{min-height:260px}.vpc-rings{grid-template-columns:repeat(2,1fr)}.vpc-myday{grid-template-columns:110px 1fr}.vpc-myday-actions{grid-column:1/-1;grid-template-columns:1fr 1fr}.vpc-choices{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.vpc-hero{padding:14px;border-radius:20px}.vpc-character{font-size:7rem}.vpc-rings{gap:8px}.vpc-ring{width:72px;height:72px}.vpc-myday{grid-template-columns:1fr;text-align:center}.vpc-needs{grid-template-columns:1fr}.vpc-choices{grid-template-columns:repeat(2,1fr)}}

/* 2026-09-15 layout pass: more breathing room and a shorter companion hero */
#dashboard .vp-welcome{align-items:flex-start!important;gap:28px!important;margin-bottom:26px!important}
#dashboard .vp-welcome>div:first-child{min-width:420px}
#dashboard .vp-welcome h2{margin-bottom:4px!important;line-height:1.05!important}
#dashboard .vp-welcome p{margin:6px 0 14px!important}
#dashboard .vp-reminder{margin:0!important;min-height:96px!important;padding:20px 24px!important;align-self:flex-start}
#vpDashboardCompanion{margin:0 0 22px!important}
.vpc-hero{padding:20px!important;gap:28px!important;grid-template-columns:minmax(230px,.7fr) minmax(500px,1.7fr)!important}
.vpc-character-pane{min-height:270px!important}
.vpc-character{font-size:7.5rem!important;transform:translateY(-18px)!important}
.vpc-rings{margin:2px 0 4px!important;gap:18px!important}
.vpc-status{margin-top:2px!important}
.vp-feature-launchers{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 24px}
.vp-feature-launch{appearance:none;text-align:left;border:1px solid rgba(138,162,211,.22);border-radius:20px;padding:16px 18px;background:linear-gradient(135deg,#151d31,#101827);color:#fff;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;cursor:pointer;box-shadow:0 12px 28px rgba(0,0,0,.12)}
.vp-feature-launch>span{font-size:1.65rem}.vp-feature-launch b{display:block;font-size:1rem}.vp-feature-launch small{display:block;color:#aebbd2;margin-top:3px}.vp-feature-launch>strong{color:#e94988}
.vp-feature-launch:hover{transform:translateY(-1px);border-color:rgba(233,73,136,.55)}
.vp-top-grid{align-items:start!important;margin-top:0!important}.vp-plan-card{min-width:0}.vp-plan-items{margin-top:14px!important}.vp-plan-item{min-height:82px!important}
@media(max-width:900px){#dashboard .vp-welcome>div:first-child{min-width:0}.vp-feature-launchers{grid-template-columns:1fr}.vpc-hero{grid-template-columns:1fr!important}}
@media(max-width:560px){#dashboard .vp-welcome{gap:16px!important}.vp-feature-launch{grid-template-columns:auto 1fr}.vp-feature-launch>strong{display:none}.vpc-character-pane{min-height:230px!important}}

/* Adult health overview — replaces oversized game-style quest hero */
.vpa-overview{display:grid;gap:22px;max-width:1280px;margin:0 auto;padding-bottom:40px;color:#f5f6f8}
.vpa-summary,.vpa-section{background:#14171c;border:1px solid #30343b;border-radius:14px;padding:24px;box-shadow:none}
.vpa-profile{display:grid;grid-template-columns:92px 1fr auto;gap:18px;align-items:center;padding-bottom:22px;border-bottom:1px solid #2c3037}
.vpa-avatar{width:92px;height:92px;border-radius:12px;background-size:cover;background-position:center 42%;border:1px solid #3a3e46;filter:saturate(.82) contrast(1.03)}
.vpa-kicker,.vpa-focus>span{display:block;color:#b9858f;font-size:.76rem;font-weight:800;letter-spacing:.13em;margin-bottom:5px}
.vpa-profile h2,.vpa-section h2{margin:0;font-size:1.55rem;line-height:1.15}.vpa-profile p{margin:5px 0 0;color:#aeb4bf}.vpa-customize{min-width:118px}
.vpa-focus{padding-top:22px;max-width:900px}.vpa-focus h3{margin:5px 0 8px;font-size:1.25rem;line-height:1.4;font-weight:650}.vpa-focus p{margin:0;color:#9fa7b3;line-height:1.55}
.vpa-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:20px}.vpa-section-head>strong,.vpa-section-head>span{color:#aeb4bf;font-size:.9rem;font-weight:650}
.vpa-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.vpa-metric{display:flex;align-items:center;gap:14px;background:#191d23;border:1px solid #2d323a;border-radius:10px;padding:16px;min-width:0}.vpa-metric b{display:block;font-size:1rem}.vpa-metric small{display:block;color:#9ea6b2;margin-top:4px;white-space:nowrap}.vpa-meter{--pct:0%;width:58px;height:58px;flex:0 0 58px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#a75a6d var(--pct),#2c3138 0);position:relative}.vpa-meter:before{content:"";position:absolute;inset:6px;border-radius:50%;background:#15191e}.vpa-meter span{position:relative;font-weight:800;font-size:.8rem}
.vpa-columns{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:22px}.vpa-targets{display:grid;gap:10px}.vpa-target{width:100%;display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:12px;text-align:left;background:#191d23;color:#f5f6f8;border:1px solid #30353d;border-radius:10px;padding:14px 15px;cursor:pointer}.vpa-target:hover{border-color:#7e515d;background:#1d2026}.vpa-target.done{opacity:.72}.vpa-target b{display:block}.vpa-target small{display:block;color:#a3aab5;margin-top:3px}.vpa-target strong{font-size:.8rem;color:#b9858f}.vpa-check{width:24px;height:24px;border:1px solid #606772;border-radius:50%;display:grid;place-items:center;font-size:.8rem}.vpa-target.done .vpa-check{background:#39423f;border-color:#6f827b}
.vpa-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.vpa-actions button{background:#1b1f25;color:#f4f5f7;border:1px solid #343942;border-radius:9px;padding:13px 14px;text-align:left;font-weight:700;cursor:pointer}.vpa-actions button:hover{border-color:#875764;background:#20242a}.vpa-note{margin-top:18px;padding:16px;border-left:3px solid #8f5968;background:#191c21}.vpa-note p{margin:5px 0 0;color:#9fa7b3;line-height:1.5}
/* Make the wellness header feel like an adult health feature, not a game screen */
#wellness .screen-head .eyebrow{color:#b9858f!important}#wellness .screen-head h2{font-size:clamp(1.8rem,3vw,2.4rem)!important}#wellness .vp-wellness-tabs{border-radius:10px!important;background:#12151a!important;border-color:#2d3239!important}#wellness .vp-wellness-tabs .tab{border-radius:7px!important;background:transparent!important}#wellness .vp-wellness-tabs .tab.active{background:#262a30!important;box-shadow:inset 0 -2px #9b6170!important}
@media(max-width:1000px){.vpa-metrics{grid-template-columns:1fr 1fr}.vpa-columns{grid-template-columns:1fr}}
@media(max-width:640px){.vpa-overview{gap:14px}.vpa-summary,.vpa-section{padding:17px;border-radius:10px}.vpa-profile{grid-template-columns:68px 1fr}.vpa-avatar{width:68px;height:68px}.vpa-customize{grid-column:1/-1;width:100%}.vpa-metrics{grid-template-columns:1fr}.vpa-actions{grid-template-columns:1fr}.vpa-section-head{align-items:flex-start;flex-direction:column}.vpa-metric{padding:13px}}


/* Companion page portrait sizing v8 */
@media(min-width:760px){
  .vpa-profile{
    grid-template-columns:180px minmax(0,1fr) auto!important;
    gap:24px!important;
    align-items:center!important;
  }
  .vpa-avatar{
    width:180px!important;
    height:230px!important;
    border-radius:12px!important;
    background-size:cover!important;
    background-position:center 30%!important;
  }
}


/* HealthyBound Quest modern Customize button - 2026-09-15 */
.vpa-customize{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  min-width:210px!important;
  padding:14px 24px!important;
  border:0!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#d95c91 0%,#bd4c9d 52%,#7657d8 100%)!important;
  color:#fff!important;
  font:700 16px/1 inherit!important;
  cursor:pointer!important;
  box-shadow:0 8px 24px rgba(190,76,157,.28),inset 0 1px 0 rgba(255,255,255,.20)!important;
  transition:transform 160ms ease,box-shadow 160ms ease,filter 160ms ease!important;
}
.vpa-customize::before{content:"⚙"!important;font-size:20px!important;line-height:1!important}
.vpa-customize::after{content:"→"!important;font-size:21px!important;font-weight:700!important;margin-left:3px!important}
.vpa-customize:hover{
  transform:translateY(-2px)!important;
  filter:brightness(1.07)!important;
  box-shadow:0 12px 30px rgba(190,76,157,.38),inset 0 1px 0 rgba(255,255,255,.24)!important;
}
.vpa-customize:active{transform:translateY(0) scale(.98)!important}
.vpa-customize:focus-visible{outline:3px solid rgba(217,92,145,.35)!important;outline-offset:4px!important}
@media(max-width:700px){
  .vpa-customize{min-width:0!important;width:100%!important;padding:13px 18px!important}
}

/* v43 — live eye glints on existing artwork. No image file/path/layout changes. */
.vpa-avatar{position:relative!important}
.hbq-live-eyes{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden;border-radius:inherit}
.hbq-eye{display:none;position:absolute;width:6px;height:6px;border-radius:50%;
  background:rgba(150,225,255,.95);box-shadow:0 0 5px rgba(75,185,255,.9);
  transition:transform 650ms ease-in-out;will-change:transform}
.vpa-avatar[data-hbq-companion="dragon"] .hbq-eye{display:block}
.vpa-avatar[data-hbq-companion="dragon"] .hbq-eye-left{left:36.2%;top:34.5%}
.vpa-avatar[data-hbq-companion="dragon"] .hbq-eye-right{left:62.4%;top:34.0%}
@media (prefers-reduced-motion:reduce){.hbq-live-eyes{display:none!important}}

/* v44 — slightly more visible dragon eye glints; artwork itself remains untouched. */
.vpa-avatar[data-hbq-companion="dragon"] .hbq-eye{
  width:8px!important;height:8px!important;
  background:rgba(205,245,255,.98)!important;
  box-shadow:0 0 4px rgba(180,240,255,1),0 0 9px rgba(55,170,255,.9)!important;
}

/* v45 — real dragon animation overlays. Original companion artwork is untouched. */
.vpa-avatar[data-hbq-companion="dragon"]{position:relative!important;overflow:hidden!important}
.hbq-dragon-live{position:absolute!important;inset:0!important;z-index:6!important;pointer-events:none!important;overflow:hidden!important;border-radius:inherit!important}
.hbq-dragon-live img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;pointer-events:none!important}
.hbq-dragon-eye-overlay{opacity:.88!important;transition:transform 650ms ease-in-out!important;will-change:transform!important}
.hbq-dragon-blink-overlay{opacity:0!important;transition:opacity 55ms linear!important}
.hbq-dragon-blink-overlay.is-blinking{opacity:1!important}
@media (prefers-reduced-motion:reduce){.hbq-dragon-live{display:none!important}}

/* v46 — retire all earlier eye-overlay experiments. */
.hbq-live-eyes,.hbq-eye-layer,.hbq-dragon-eye-overlay,.hbq-dragon-blink-overlay{display:none!important}

/* Responsive single-eye animation. Position is set by JS from source-art coordinates. */
.hbq-dragon-live{position:absolute!important;inset:0!important;z-index:7!important;pointer-events:none!important;overflow:hidden!important;border-radius:inherit!important}
.hbq-real-eye,.hbq-real-lid{position:absolute!important;transform:translate(-50%,-50%)!important;pointer-events:none!important}
.hbq-real-eye{border-radius:50%!important;overflow:hidden!important}
.hbq-real-pupil{position:absolute!important;left:50%!important;top:50%!important;width:22%!important;height:62%!important;transform:translate(0,0);margin-left:-11%!important;margin-top:-31%!important;border-radius:50%!important;background:rgba(4,16,28,.72)!important;box-shadow:0 0 3px rgba(125,225,255,.5)!important;transition:transform 650ms ease-in-out!important;will-change:transform!important}
.hbq-real-lid{opacity:0!important;border-radius:55% 55% 45% 45%!important;background:rgba(13,35,52,.94)!important;transition:opacity 50ms linear!important}
.hbq-real-lid.is-blinking{opacity:1!important}
@media (prefers-reduced-motion:reduce){.hbq-dragon-live{display:none!important}}