/* URBI v3: premium responsive visual system, light on dependencies */
:root{--premium-ink:#102e59;--premium-blue:#1284eb;--premium-cyan:#38d9ef;--premium-glow:#b9eafc}
body{background:#eaf5ff!important;color:var(--premium-ink)}
.page{background:linear-gradient(128deg,#e2f7ff 0%,#eef6ff 42%,#e9edff 100%)}
.topbar{background:#ffffffc9;backdrop-filter:blur(20px);border-bottom:1px solid #d8e9f7}
.world{background:radial-gradient(ellipse at 54% 41%,#d7faff 0%,#e6f3ff 44%,#f0efff 100%)}
.ambient{opacity:.62}.orbit{opacity:.32}.world:before{content:'';position:absolute;width:600px;height:600px;left:50%;top:39%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#9be8ff3c,transparent 67%);pointer-events:none}
.companion-meta{background:#fffffff2;box-shadow:0 10px 35px #438ec51b;padding:10px 16px;border:1px solid #e1edf7;border-radius:18px}
.companion-meta strong{letter-spacing:-.03em}.bubble{max-width:350px;background:#ffffffee;border:1px solid #cfedfa;box-shadow:0 16px 50px #72b7da2c}
.pet{filter:drop-shadow(0 18px 30px #7cb9ef55)}
.fashion-overlay{position:absolute;inset:0;width:250px;height:301px;z-index:8;pointer-events:none}
.fashion-overlay [data-look]{display:none}
.fashion-overlay [data-look].visible{display:block}
.quick-health{position:absolute;left:clamp(10px,2vw,32px);top:30%;z-index:9;display:grid;gap:8px}
.quick-health span{display:flex;align-items:center;gap:7px;border:1px solid #d2e9f4;box-shadow:0 5px 18px #4f8eb526;padding:9px 12px;border-radius:14px;background:#ffffffcf;backdrop-filter:blur(14px);font-size:12px;color:#315780}
.quick-health b{font-weight:850;color:#194279}
.want-card{position:absolute;left:50%;bottom:344px;transform:translateX(-50%);z-index:12;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 42px);width:max-content;border:1px solid #cceaf9;border-radius:20px;padding:10px 12px;background:#ffffffed;box-shadow:0 12px 45px #398bc52c;backdrop-filter:blur(15px)}
.want-card[hidden]{display:none!important}.want-card .want-icon{font-size:28px}.want-card small{font-size:10px;display:block;color:#6d8aa8}.want-card strong{font-size:12px;display:block;color:#274a75;max-width:230px}.want-card button{border:0;background:#087fe6;color:white;padding:10px 12px;border-radius:12px;white-space:nowrap;font-size:12px}
.tool-button{border:1px solid #d2e9f8!important}.tool-button:hover,.care-dock button:hover{background:#ebfaff;transform:translateY(-2px)}
.care-dock{bottom:295px}.care-dock button{border:1px solid #c7e6fa;padding:10px 15px}
.conversation{background:#fffffff5;border:1px solid #d0e6f7;box-shadow:0 22px 80px #3c8acb28}
.conversation .chat-input input{background:#fff;border-radius:13px}.conversation.expanded .messages{height:min(42dvh,355px)}
.panel-title-row{display:flex;align-items:center;justify-content:space-between;gap:15px}.panel-overline{font-weight:900;font-size:10px!important;letter-spacing:.14em;color:#1887cf!important;margin:0 0 5px!important}.panel-symbol{font-size:30px;background:#e5f7ff;padding:10px;border-radius:17px}.drawer{width:min(490px,100vw);background:linear-gradient(160deg,#f9fdff,#eff6ff)}.drawer-content>p{margin-bottom:17px!important}
.catalog-filter{display:flex;gap:7px;overflow-x:auto;padding:3px 0 13px;scrollbar-width:thin}.catalog-filter button{white-space:nowrap;border-radius:999px;padding:9px 14px;background:#eaf4ff;border:1px solid #d2e7f8;color:#315d85;font-size:12px;font-weight:750}.catalog-filter button.active{background:#146ad6;color:white;border-color:#146ad6}
.catalog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.catalog-card{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-height:147px;border:1px solid #d6e6f6;background:#fff;border-radius:19px;padding:15px;box-shadow:0 7px 22px #5b90b016}.catalog-card .card-emoji{font-size:32px}.catalog-card strong{font-size:13px}.catalog-card p{font-size:11px;color:#6f889f;margin:0;flex:1}.catalog-card button{align-self:stretch;border:0;color:#125eab;background:#e4f5ff;padding:9px 12px;border-radius:11px;font-size:12px;font-weight:800}.catalog-card button:disabled{opacity:.58;cursor:default}.catalog-card button.selected{background:#d8f9ee;color:#17795e}.catalog-card button:hover:not(:disabled){background:#d0ecff}.shop-balance{margin:8px 0 14px;padding:12px 15px;border-radius:15px;background:#0f2f62;color:#ffe99d;display:flex;align-items:center;gap:5px}.shop-balance small{font-size:11px;color:#cce6ff}
.need-summary{display:flex;gap:6px;margin:12px 0 18px;flex-wrap:wrap}.need-summary span{background:#e7f4ff;color:#235a8c;border-radius:12px;padding:9px 11px;font-size:11px;font-weight:760}
.mission-grid{display:grid;gap:9px;margin:18px 0}.mission{display:flex;gap:14px;align-items:center;border:1px solid #d4e8f4;background:white;border-radius:17px;padding:12px}.mission>span{font-size:25px}.mission>div{flex:1}.mission strong{font-size:13px}.mission p{font-size:11px;color:#748ca5;margin:3px 0}.mission b{color:#1d7ec5;font-size:11px}.mission.done{background:#effbf7;border-color:#bce8d5}.wide{width:100%}
.world[data-scene="garden"]{background:radial-gradient(ellipse at 50% 40%,#d5fff2,#d9f9ee 44%,#b9e9d5)}
.world[data-scene="sunset"]{background:radial-gradient(ellipse at 50% 40%,#fff4d5,#ffe9cf 52%,#fbd3df)}
.world[data-scene="space"]{background:radial-gradient(ellipse at 50% 40%,#213e82,#142b61 58%,#0a173a)}
.world[data-scene="space"] .hello h1,.world[data-scene="space"] .hello p,.world[data-scene="space"] .companion-meta{color:#112d5d}
.world[data-scene="beach"]{background:radial-gradient(ellipse at 50% 42%,#d8faff,#c2ebff 46%,#fff1d5)}
.world[data-scene="studio"]{background:radial-gradient(ellipse at 50% 35%,#ebebff,#e9f1ff 48%,#dce9fc)}
.world.night{background:radial-gradient(ellipse at 50% 40%,#274779,#102a5c 57%,#091c43)}
@media(max-width:720px){.pet{--pet-scale:1.14;top:32%}.quick-health{top:19%;left:7px;gap:5px}.quick-health span{font-size:10px;padding:6px 8px;gap:3px}.side-tools{top:21%;right:5px;gap:7px}.tool-button{padding:7px;min-width:45px}.tool-button span{font-size:19px}.want-card{bottom:280px;padding:7px 9px;gap:6px;border-radius:15px}.want-card strong{max-width:160px;font-size:11px}.want-card .want-icon{font-size:20px}.want-card button{font-size:10px;padding:8px}.care-dock{bottom:238px}.care-dock button{font-size:18px;padding:7px 9px}.catalog-grid{gap:8px}.catalog-card{padding:12px;min-height:146px}.bubble{top:16%;max-width:62vw;font-size:11px}.ground{top:54%}}
@media(max-width:380px){.pet{--pet-scale:.95}.quick-health span{font-size:9px;padding:5px}.want-card{bottom:267px}.care-dock{bottom:230px}.bubble{max-width:60vw}}
/* Keep character's face unobstructed on phones. */
@media(max-width:720px){.bubble{top:51%;max-width:78vw;line-height:1.35}.want-card{bottom:274px}.quick-health{top:21%}}
@media(max-width:380px){.bubble{top:49%;max-width:76vw}.want-card{bottom:260px}}

/* Put URBI's spontaneous requests beside the character, never over its face. */
@media(min-width:721px){.want-card{left:clamp(230px,28%,410px);top:41%;bottom:auto;transform:translate(-100%,-50%)}}
@media(max-width:720px){.want-card{top:auto;left:50%;bottom:311px;transform:translateX(-50%)}}
@media(max-width:380px){.want-card{bottom:290px}}
@media(min-width:721px){.want-card{left:clamp(360px,34%,500px)}}
