.eco-companion{overflow:hidden;background:linear-gradient(145deg,#fff 0%,#f2f9ef 100%)}
.eco-companion__header{align-items:flex-start}.eco-companion__header h2{margin-bottom:6px}.eco-companion__header p{margin:0}
.companion-affinity{padding:9px 14px;border:1px solid #c9ded0;border-radius:999px;color:#185b3d;background:#eff8ef;font-size:.8rem;font-weight:850;white-space:nowrap}
.companion-affinity--water{color:#176279;border-color:#b9dbe7;background:#ebf7fb}.companion-affinity--circular{color:#815b10;border-color:#ead59e;background:#fff8e5}.companion-affinity--balanced{color:#654b87;border-color:#d9cbea;background:#f8f2ff}
.companion-board{margin:22px 0;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(270px,.55fr);border:1px solid #cfe0d3;border-radius:26px;background:#fff;box-shadow:0 20px 50px rgba(15,77,49,.08);overflow:hidden}
.companion-habitat{position:relative;min-height:480px;overflow:hidden;background:linear-gradient(#bce6ff 0 55%,#8ec96b 55% 78%,#6ca44e 78% 100%)}
.companion-habitat::before{content:"";position:absolute;right:-8%;bottom:16%;left:-8%;height:25%;border-radius:50% 50% 0 0;background:rgba(70,139,68,.38)}
.companion-habitat--water{background:linear-gradient(#bceaff 0 52%,#a6dfd3 52% 68%,#58aabe 68% 100%)}.companion-habitat--water::before{background:rgba(255,255,255,.22)}
.companion-habitat--circular{background:linear-gradient(#d7edff 0 54%,#c4d985 54% 78%,#8ead61 78% 100%)}.companion-habitat--balanced{background:linear-gradient(#dcd4ff 0 52%,#e6d8f5 52% 67%,#91c778 67% 100%)}
.habitat-sun{position:absolute;top:30px;right:36px;font-size:3.1rem;filter:drop-shadow(0 6px 14px rgba(255,182,43,.28))}.habitat-cloud{position:absolute;color:rgba(255,255,255,.78);font-size:3.3rem}.habitat-cloud--one{top:38px;left:9%}.habitat-cloud--two{top:105px;right:23%;font-size:2.4rem}
.habitat-items{position:absolute;z-index:3;right:26px;bottom:30px;left:26px;display:flex;align-items:end;justify-content:space-between;gap:10px}.habitat-item{position:relative;font-size:clamp(2.15rem,5vw,4.2rem);filter:drop-shadow(0 8px 5px rgba(29,71,42,.22));transform-origin:bottom}.habitat-item:nth-child(even){transform:scale(.82)}.habitat-item small{position:absolute;right:-6px;bottom:-2px;padding:2px 6px;border-radius:999px;color:#fff;background:#176b45;font-size:.62rem}
.companion-character{position:absolute;z-index:5;top:49%;left:50%;width:190px;height:190px;display:grid;place-items:center;transform:translate(-50%,-50%)}.companion-character__glow{position:absolute;inset:2px;border:2px solid rgba(255,255,255,.62);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.65),rgba(255,255,255,.08) 62%,transparent 63%);box-shadow:0 0 42px rgba(255,255,255,.45)}.companion-character__emoji{position:relative;z-index:2;font-size:clamp(5.4rem,11vw,8rem);filter:drop-shadow(0 13px 7px rgba(29,58,36,.23));animation:companion-float 3.2s ease-in-out infinite}.companion-character__shadow{position:absolute;bottom:9px;width:105px;height:19px;border-radius:50%;background:rgba(30,61,38,.2);filter:blur(3px)}
.companion-speech{position:absolute;z-index:7;top:25px;left:50%;width:min(360px,70%);padding:12px 16px;display:grid;border:1px solid rgba(255,255,255,.8);border-radius:16px;color:#214c35;background:rgba(255,255,255,.9);box-shadow:0 12px 26px rgba(17,70,43,.1);transform:translateX(-50%);text-align:center}.companion-speech strong{font-size:.9rem}.companion-speech span{color:#547061;font-size:.76rem}
.companion-status{padding:34px 28px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(160deg,#0d4932,#176b45);color:#fff}.companion-stage-number{color:#b9dc67;font-size:.7rem;font-weight:900;letter-spacing:.18em}.companion-status h3{margin:12px 0 2px;font-size:1.65rem}.companion-status>p{margin:0;color:#d6e9de}.companion-status>small{margin-top:8px;color:#c6ddcf;line-height:1.55}
.companion-progress{height:9px;margin-top:28px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden}.companion-progress>span{width:var(--companion-progress);height:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,#9bd45c,#d9ef79)}.companion-progress__copy{margin-top:9px;display:flex;justify-content:space-between;gap:12px;color:#d7eadf;font-size:.78rem}.companion-progress__copy strong{color:#d9ef79}
.companion-care-tips{margin-top:26px;padding-top:19px;display:grid;gap:9px;border-top:1px solid rgba(255,255,255,.15);color:#d9e9df;font-size:.76rem}
.habitat-settings{padding:20px;grid-template-columns:1fr 1fr auto;border:1px solid #d5e4d8;border-radius:18px;background:#fff}.companion-shop-heading{margin:34px 0 16px;display:flex;align-items:end;justify-content:space-between;gap:22px}.companion-shop-heading h3{margin:4px 0 0;font-size:1.35rem}.companion-shop-heading>p{max-width:460px;margin:0;color:var(--color-muted);font-size:.82rem;text-align:right}.companion-shop article{background:linear-gradient(145deg,#fff,#f6faf5)}.companion-shop article>span{width:58px;height:58px;display:grid;place-items:center;border-radius:18px;background:#eaf5e7}
@keyframes companion-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-11px) rotate(2deg)}}
@media(max-width:840px){.companion-board{grid-template-columns:1fr}.companion-habitat{min-height:430px}.companion-status{padding:27px}.habitat-settings{grid-template-columns:1fr 1fr}.habitat-settings .button{grid-column:1/-1}.companion-shop-heading{align-items:flex-start;flex-direction:column}.companion-shop-heading>p{text-align:left}}
@media(max-width:560px){.eco-companion{padding-inline:14px}.companion-habitat{min-height:360px}.companion-character{width:150px;height:150px}.companion-character__emoji{font-size:5.6rem}.companion-speech{top:16px;width:86%}.habitat-items{right:12px;bottom:20px;left:12px}.habitat-item{font-size:2.4rem}.habitat-settings{grid-template-columns:1fr}.habitat-settings .button{grid-column:auto}.companion-affinity{white-space:normal}.companion-status h3{font-size:1.4rem}}
@media(prefers-reduced-motion:reduce){.companion-character__emoji{animation:none}}