:root{font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;color:#fff;background:#100b26;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 20% 0%,#542168 0%,transparent 48%),radial-gradient(ellipse at 95% 70%,#3b1857 0%,transparent 47%),#100b26}button,input,select{font:inherit}button{cursor:pointer;border:0}button:disabled{opacity:.55;cursor:not-allowed}.loading{text-align:center;padding:20vh 1rem;font-size:24px}.shell{max-width:1220px;margin:auto;padding:17px 16px 105px}.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}.brand{font-size:28px;font-weight:1000;letter-spacing:-1.2px;text-shadow:0 0 19px #d94bfc}.brand span{color:#fc8cc9}.topmoney{display:flex;gap:8px}.money{border:1px solid #9956b7;background:#2f1954;border-radius:30px;padding:9px 14px;font-weight:800;box-shadow:inset 0 1px #ffffff27}.nav{display:flex;gap:7px;overflow-x:auto;padding:4px 0 16px;scrollbar-width:none}.nav button{flex:none;background:#2b1a49;color:#e7d8f7;border:1px solid #5b3f7a;border-radius:15px;padding:11px 13px;font-size:14px;font-weight:800}.nav .active{background:linear-gradient(125deg,#ed4ab7,#873de8);border-color:#fba3f1;box-shadow:0 0 14px #d850ad77}.layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(270px,.85fr);gap:15px}.panel{background:linear-gradient(145deg,#382053eb,#1f173bea);border:1px solid #9c6cb5;border-radius:22px;padding:17px;box-shadow:0 12px 32px #08031366,inset 0 1px #ffffff1e}.panel h2,.panel h3{margin:0 0 13px}.panel h2{font-size:21px}.panel h3{font-size:17px}.hero{position:relative;overflow:hidden;min-height:520px;background:linear-gradient(180deg,#332350 0%,#683e79 49%,#80587e 49%,#5e3b67 100%);border-radius:24px;border:1px solid #c08bc6;box-shadow:0 16px 42px #0b041855;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.hero.room0{background:linear-gradient(180deg,#40323e 0%,#5c4a50 51%,#8e756d 51%,#68564d 100%)}.hero.room1{background:linear-gradient(180deg,#3c3458 0%,#6e547f 51%,#b28f9f 51%,#87627c 100%)}.hero.room2{background:linear-gradient(180deg,#2f2a60 0%,#7146aa 51%,#c482c0 51%,#875d9b 100%)}.hero.room3,.hero.room4{background:linear-gradient(180deg,#20194a 0%,#5639a3 51%,#bc74c9 51%,#8355aa 100%)}.room-head{position:relative;z-index:1;width:100%;display:flex;justify-content:space-between;align-items:start;padding:17px}.chip{background:#24133acc;border:1px solid #d290ec9a;backdrop-filter:blur(10px);border-radius:18px;padding:9px 13px;font-weight:800;font-size:14px}.window{position:absolute;top:82px;left:13%;width:39%;height:185px;border:9px solid #8b5f88;border-radius:90px 90px 12px 12px;background:linear-gradient(#111b53,#4f4783 60%,#a75f8e);box-shadow:0 3px 14px #19112d66,inset 0 0 18px #b6a8ff66}.window:after{content:'✦ ✧  ✦';position:absolute;top:28px;left:25px;color:#ffdea6;font-size:23px;letter-spacing:10px}.window:before{content:'';position:absolute;left:50%;height:100%;width:6px;background:#8b5f88}.decor{position:absolute;z-index:0;font-size:72px;filter:drop-shadow(0 8px 8px #280b3559)}.decor.bed{bottom:92px;left:4%}.decor.plant{bottom:90px;right:6%}.decor.lamp{top:140px;right:10%}.pet-stage{margin:auto;z-index:1;position:relative;text-align:center;width:100%;padding-top:65px}.pet-graphic{width:min(365px,92%);height:355px;margin:auto;filter:drop-shadow(0 14px 18px #27103788);animation:bob 3.6s ease-in-out infinite;cursor:pointer;transition:transform .2s}.pet-graphic:active{transform:scale(.95)}@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -11px}}.pet-name{position:relative;font-size:26px;font-weight:900;text-shadow:0 2px 6px #28102f}.speech{position:absolute;right:12%;top:75px;background:#fff;border-radius:20px;padding:12px;color:#d33b8c;font-size:24px;box-shadow:0 5px 15px #2a103755}.room-actions{z-index:2;display:flex;justify-content:center;gap:7px;flex-wrap:wrap;padding:15px 12px 21px;background:linear-gradient(transparent,#2b124db3);width:100%}.action{min-width:77px;background:linear-gradient(#76458e,#49296e);color:white;padding:10px 8px;border-radius:15px;border:1px solid #d99df4;box-shadow:inset 0 1px #ffffff66;font-size:13px;font-weight:800}.action span{display:block;font-size:26px;margin-bottom:3px}.action:hover{filter:brightness(1.18)}.stat{margin:13px 0}.statline{display:flex;justify-content:space-between;font-size:13px;font-weight:700;margin-bottom:6px}.track{background:#1c1436;height:9px;border-radius:40px;overflow:hidden}.bar{height:100%;border-radius:40px;background:linear-gradient(90deg,#fe72cb,#ad65fc)}.bar.low{background:#ff895f}.stack{display:grid;gap:14px}.small{color:#c9b6d9;font-size:13px}.notice{background:#503067;border:1px solid #c478c5;border-radius:14px;padding:11px;font-size:13px}.btn{border-radius:14px;padding:12px 16px;color:white;font-weight:800;background:linear-gradient(130deg,#cc46bb,#7838e2);box-shadow:0 6px 18px #bc3fc047}.btn.gold{background:linear-gradient(#ffd685,#ef8a2a);color:#42204b}.btn.subtle{background:#4c306e;border:1px solid #855eac;box-shadow:none}.btn.full{width:100%}.btnrow{display:flex;gap:8px;flex-wrap:wrap}.form{display:grid;gap:13px;max-width:700px;margin:auto}.field{display:grid;gap:6px}.field label{font-size:13px;font-weight:800;color:#e6c9f9}.field input,.field select{min-height:44px;background:#281a46;color:#fff;padding:12px;border:1px solid #8b64b0;border-radius:12px;width:100%}.field select option{color:#111}.pet-choice{display:flex;gap:12px}.pet-choice button{flex:1;background:#2b2144;border:2px solid #6a4c83;color:white;border-radius:18px;padding:15px;font-weight:800;font-size:18px}.pet-choice .selected{border-color:#ff82d4;background:#643380}.choice-icon{font-size:62px;display:block}.colors{display:flex;flex-wrap:wrap;gap:8px}.color-dot{width:43px;height:43px;border:3px solid transparent;border-radius:50%;box-shadow:0 2px 7px #0005}.color-dot.selected{border-color:#ff76f4;outline:2px solid white}.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}.item{border:1px solid #78539d;background:#2b1b47;border-radius:17px;padding:13px;display:flex;flex-direction:column;gap:9px;align-items:center;text-align:center}.item.owned{border-color:#4bcda7}.item .emoji{font-size:58px}.item .name{font-weight:850}.item .small{font-size:12px}.item button{width:100%}.pet-card svg{height:143px;width:100%;max-width:155px}.roomtiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}.roomtile{padding:18px;background:#2d204d;border:1px solid #825c9c;border-radius:20px;text-align:center}.roomtile .emoji{font-size:70px}.tabs{display:flex;gap:8px;overflow-x:auto;margin-bottom:15px}.tabs button{background:#281844;color:white;padding:9px 13px;border:1px solid #6a4685;border-radius:20px;font-weight:700;white-space:nowrap}.tabs .chosen{background:#ae408d;border-color:#f39ed9}.mini{border-radius:18px;background:#251640;padding:16px;text-align:center;min-height:290px}.game-button{font-size:70px;background:transparent}.gamegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:320px;margin:auto}.gamegrid button{aspect-ratio:1;background:#6b408d;color:white;border-radius:15px;border:1px solid #d6a7ef;font-size:32px}.gamegrid .matched{background:#236b64}.large{font-size:22px;font-weight:900}.row{display:flex;align-items:center;justify-content:space-between;gap:10px}.badge{padding:5px 10px;border-radius:50px;background:#7f3e99;font-size:12px;font-weight:800}.feed{display:grid;gap:9px}.feed div{border-radius:10px;background:#ffffff0b;padding:10px}.empty{text-align:center;padding:24px;color:#bca8cd}.footer{text-align:center;color:#947fa6;font-size:11px;margin-top:20px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:99;background:#211335;border:1px solid #f4a7ed;border-radius:18px;padding:13px 19px;box-shadow:0 0 30px #a73cc988;min-width:200px;text-align:center;max-width:90%}.loading{font-weight:800} .mobile-only{display:none}@media(max-width:800px){.layout{grid-template-columns:1fr}.shell{padding:12px 9px 100px}.panel{padding:13px}.hero{min-height:540px}.top{gap:8px}.brand{font-size:25px}.nav button{padding:10px 11px}.mobile-only{display:block}.pet-graphic{width:95%;height:310px}.window{height:160px}.cardgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.action{min-width:62px;font-size:11px}.action span{font-size:24px}.room-actions{gap:5px}.item{padding:10px}.pet-stage{padding-top:50px}}@media(max-width:360px){.action{min-width:54px;padding:8px 4px}.brand{font-size:21px}.money{padding:7px}}

/* Edition 1.1: improved pet presentation and live room furniture */
.decor.equipped{right:21%;bottom:100px;font-size:57px;animation:bob 4s ease-in-out infinite}.pet-avatar{overflow:visible;filter:drop-shadow(0 8px 10px rgba(30,10,52,.32))}.pet-stage:active .pet-graphic{filter:drop-shadow(0 3px 25px rgba(255,173,237,.8))}.pet-graphic svg{max-width:100%;height:100%}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ffcf6f;outline-offset:3px}@media(max-width:800px){.decor.equipped{right:20%;bottom:104px;font-size:44px}}

/* PETOPIA release candidate: touch friendly navigation and polished cards */
html{scroll-behavior:smooth} .top{position:sticky;top:0;z-index:15;padding:10px 12px;background:#1a1032e8;backdrop-filter:blur(16px);border:1px solid #8451ae80;border-radius:20px} .hero{box-shadow:0 20px 60px #0006,inset 0 0 70px #eeb2ff13} .pet-graphic{animation:bob 3.6s ease-in-out infinite} .pet-graphic svg{filter:drop-shadow(0 2px 18px #f8b2eb80)} .panel,.item{transition:border-color .15s,transform .15s} .item:hover{border-color:#ffaae6} .room-head{flex-wrap:wrap;gap:8px} @media(max-width:800px){.top{top:0}.nav{position:sticky;top:68px;z-index:14;background:#190f2de8;backdrop-filter:blur(12px);border-radius:15px;padding:8px 4px}.hero{min-height:520px}.pet-stage{padding-top:35px}.pet-graphic{height:290px}.room-actions{padding-bottom:12px}}
@media(prefers-reduced-motion:reduce){.pet-graphic,.decor.equipped{animation:none!important}}

/* PETOPIA 1.3 — responsive animated habitat and pet feedback */
.hero{isolation:isolate;border:2px solid #f0c7fa70;min-height:570px}
.hero::before{content:"";position:absolute;inset:0 0 49%;pointer-events:none;background:radial-gradient(circle at 70% 33%,#ffb9df40,transparent 40%),repeating-linear-gradient(90deg,transparent 0 55px,#ffffff08 56px 57px);z-index:0}
.hero::after{content:"";position:absolute;inset:51% 0 0;background:repeating-linear-gradient(107deg,#0000 0 65px,#3b184b15 68px 71px);pointer-events:none}
.room-floor-rug{position:absolute;bottom:103px;left:20%;width:64%;height:75px;border-radius:50%;background:radial-gradient(ellipse,#ffe0f49c 10%,#ad71c3bb 62%,#62367100 72%);z-index:0;transform:perspective(100px) rotateX(35deg)}
.room-baseboard{position:absolute;top:50%;width:100%;height:9px;background:linear-gradient(#ecb5d29c,#634269);box-shadow:0 5px 15px #25112e60}
.room-wall-art{position:absolute;right:15%;top:85px;font-size:38px;opacity:.7;filter:drop-shadow(0 3px 8px #241239)}
.pet-stage{z-index:3;user-select:none}.pet-graphic{touch-action:manipulation;outline-offset:6px;transform-origin:center bottom;will-change:transform}
.pet-graphic:focus-visible{outline:3px solid #ffd281;border-radius:30px}
.pet-eyes{transform-box:fill-box;transform-origin:center;animation:eyesBlink 6.3s infinite}
@keyframes eyesBlink{0%,42%,44%,73%,75%,100%{transform:scaleY(1)}43%,74%{transform:scaleY(.08)}}
.tail-animated{transform-box:fill-box;transform-origin:5% 90%;animation:tailWag 2s ease-in-out infinite}
@keyframes tailWag{0%,100%{rotate:-9deg}50%{rotate:12deg}}
.pet-graphic.do-play{animation:happyBounce .45s ease-in-out 3}
.pet-graphic.do-feed{animation:nibble .25s ease-in-out 5}
.pet-graphic.do-wash{animation:shake .16s ease-in-out 9}
.pet-graphic.do-sleep{animation:sleeping 1.5s ease-in-out infinite}
.pet-graphic.do-pet{animation:happyBounce .7s ease-in-out 2}
@keyframes happyBounce{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-22px) scale(1.045)}}
@keyframes nibble{0%,100%{transform:scale(1)}50%{transform:scale(.96) translateY(7px)}}
@keyframes shake{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes sleeping{0%,100%{transform:scale(1) rotate(-5deg)}50%{transform:scale(.96) rotate(-5deg)}}
.care-effect{position:absolute;top:10%;left:50%;transform:translate(-50%,-5px);opacity:0;pointer-events:none;white-space:nowrap;font-weight:900;color:#ffecc1;text-shadow:0 2px 15px #580f73,0 2px 3px #350f40;font-size:20px;z-index:10}.care-effect.visible{animation:carePop 1.6s ease-out both}
@keyframes carePop{0%{opacity:0;translate:0 16px;scale:.7}18%{opacity:1;translate:0 0;scale:1.1}78%{opacity:1}100%{opacity:0;translate:0 -20px;scale:1}}
.room-sparkle{position:absolute;pointer-events:none;color:#ffe5ad;font-size:27px;text-shadow:0 0 20px #fff;animation:twinkle 3s ease-in-out infinite}.room-sparkle.s1{top:16%;left:9%}.room-sparkle.s2{top:22%;right:9%;animation-delay:1.5s}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.75)}50%{opacity:1;transform:scale(1.16)}}
.room0 .room-sparkle{display:none}.room0 .room-wall-art{opacity:.25}.room0 .window{filter:saturate(.55)}
@media(max-width:800px){.hero{min-height:560px}.room-wall-art{font-size:24px}.room-floor-rug{bottom:90px}.care-effect{font-size:18px}}
@media(prefers-reduced-motion:reduce){.pet-eyes,.tail-animated,.pet-graphic,.room-sparkle,.care-effect{animation:none!important;transition:none!important}}

/* PETOPIA 1.4 — семейные карточки */
.family-couple{background:linear-gradient(135deg,rgba(130,75,167,.24),rgba(227,94,157,.12));border:1px solid rgba(244,154,225,.27);padding:18px;border-radius:20px;margin:14px 0;text-align:center}.family-couple .emoji{font-size:44px}.family-couple h3{margin:8px 0}.family-couple .btnrow{justify-content:center;flex-wrap:wrap}.invitecode{display:grid;gap:8px;padding:12px;margin:12px auto;border-radius:14px;background:rgba(24,10,47,.75);max-width:350px}.invitecode strong{font-size:24px;letter-spacing:3px;color:#ffe28d}

/* 1.5 responsive fixes */
html{-webkit-text-size-adjust:100%}body{overflow-x:hidden}*{min-width:0}img,svg{max-width:100%}.shell{width:100%;max-width:1120px}.nav{scroll-snap-type:x proximity}.nav button{scroll-snap-align:start;white-space:nowrap}.error-card{margin:8vh auto;max-width:440px;padding:28px 20px;border:1px solid #8852ae;border-radius:22px;background:#261643;line-height:1.5}.error-card p{font-size:16px;overflow-wrap:anywhere}.error-card small{font-size:13px;color:#d2b9e7}
@media(max-width:700px){.shell{padding:12px 10px 110px}.layout{grid-template-columns:minmax(0,1fr)}.top{gap:8px}.brand{font-size:23px}.topmoney{gap:5px}.money{font-size:12px;padding:7px 9px}.nav button{padding:10px 11px;font-size:12px}.panel{padding:13px;border-radius:18px}.family-couple{padding:12px}.invitecode strong{font-size:18px;letter-spacing:1px}}
@media(max-width:350px){.brand{font-size:20px}.money{font-size:11px;padding:6px}.shell{padding-left:7px;padding-right:7px}}

/* PETOPIA 1.5.1 — narrow phones and actionable validation */
.form-error{display:block;color:#ffe7e7;background:#6c2248;border:1px solid #ef91b8;padding:12px;border-radius:12px;font-size:14px;overflow-wrap:anywhere;line-height:1.5}
.form-error[hidden]{display:none}
#petname{font-size:16px}#create{min-height:52px;white-space:normal;overflow-wrap:anywhere;line-height:1.3}
.topmoney,.top,.pet-choice,.nav,.room-actions,.layout,.panel{min-width:0}
.topmoney{display:flex;flex-wrap:wrap;justify-content:flex-end}
.nav{-webkit-overflow-scrolling:touch}
@media(max-width:480px){
 .shell{padding:9px 8px calc(24px + env(safe-area-inset-bottom,0px))}
 .top{align-items:center;flex-wrap:wrap;gap:5px;padding:9px;border-radius:14px;position:relative}
 .brand{font-size:clamp(19px,6.2vw,25px)}
 .topmoney{gap:4px}.money{font-size:12px;padding:5px 7px}
 .panel.form{width:100%;gap:12px;padding:13px}
 .pet-choice{gap:8px}
 .pet-choice button{font-size:14px;padding:10px 6px;overflow-wrap:anywhere}
 .choice-icon{font-size:42px}
 .field select,.field input{max-width:100%;font-size:16px}
 .color-dot{width:38px;height:38px}
 .nav{position:relative;top:auto;width:100%}
 .room-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
 .room-actions .action{min-width:0;padding:8px 2px;white-space:normal;overflow-wrap:anywhere;font-size:10px}
 .room-actions .action span{font-size:20px}
 .hero{min-height:520px;overflow:hidden}
 .pet-graphic{width:min(95%,260px);height:260px}
 .room-head .chip{font-size:11px;max-width:100%;overflow-wrap:anywhere}
 .cardgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .roomtiles{grid-template-columns:minmax(0,1fr)}
 .toast{width:calc(100vw - 24px);max-width:420px;bottom:calc(12px + env(safe-area-inset-bottom,0px));overflow-wrap:anywhere}
}
@media(max-width:340px){
 .cardgrid{grid-template-columns:minmax(0,1fr)}
 .pet-choice button{font-size:13px}.room-actions .action{font-size:9px}
}


/* PETOPIA 1.5.2: preview stays inside the adoption form, never covers controls */
.creation-preview{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:190px;
  min-height:0;
  overflow:hidden;
  padding:4px 8px;
  border-radius:18px;
  background:radial-gradient(ellipse at 50% 78%,rgba(196,110,212,.20),transparent 62%);
}
.creation-preview svg,
.creation-preview .pet-avatar{
  display:block;
  flex:0 1 auto;
  width:auto !important;
  max-width:100% !important;
  height:175px !important;
  max-height:100% !important;
  aspect-ratio:260 / 300;
  object-fit:contain;
  overflow:hidden;
}
@media(max-width:480px){
  .creation-preview{height:155px;padding:4px}
  .creation-preview svg,.creation-preview .pet-avatar{height:145px !important}
  .panel.form{overflow:hidden}
}


/* PETOPIA 1.6 — mobile-first studio refresh; no horizontal scroll within MAX. */
:root{--violet:#8e58ff;--pink:#ff72c6;--gold:#ffce71;--glass:#332150}
html{overflow-x:clip}body{width:100%;max-width:100vw;overflow-x:hidden;line-height:1.48}
.shell{max-width:1060px;margin:0 auto;padding:15px 14px 85px;min-width:0}
.panel{border:1px solid #916bb9;background:linear-gradient(146deg,#3d245e 0%,#251839 90%);box-shadow:0 13px 32px #0b051c70,inset 0 1px 0 #ffffff24}
.top{background:linear-gradient(115deg,#3d174e,#1b1236);border:1px solid #7a509f;border-radius:18px;padding:13px 15px;box-shadow:inset 0 1px #ffffff22}
.nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;overflow:visible;padding:2px 0 15px}
.nav button{min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.15;min-height:42px;padding:9px 5px;text-align:center}
.tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;overflow:visible;max-width:100%}
.tabs button{min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.2;min-height:46px;padding:9px 7px;text-align:center}
.cardgrid{grid-template-columns:repeat(auto-fill,minmax(min(100%,165px),1fr))}
.mini{width:100%;max-width:100%;overflow:hidden;min-height:260px;padding:20px 12px;border:1px solid #67458c}
.game-button{max-width:100%;line-height:1.35;touch-action:manipulation}
.account-panel{max-width:720px;margin:0 auto}
.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:850;color:#edb4ef;margin-bottom:7px}
.account-hero{display:flex;gap:14px;align-items:center;padding:16px;background:linear-gradient(120deg,#7844a7,#3f296b);border:1px solid #ba8bec;border-radius:19px;margin:15px 0}
.account-icon{font-size:42px}.account-hero p{margin:6px 0 0}
.account-status{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 4px;border-bottom:1px solid #74538f;font-size:14px}.account-status b{overflow-wrap:anywhere;text-align:right;font-size:12px}
.account-card{display:grid;gap:12px;padding:17px;margin-top:18px;background:#24173f;border:1px solid #745394;border-radius:20px}.account-card h3{margin:0}.account-card p{margin:0}.account-actions{display:flex;flex-wrap:wrap;gap:9px}
.account-card input{font-size:16px;min-height:46px;background:#30204c;border:1px solid #8d66aa;border-radius:12px;padding:10px 12px;color:white;width:100%}
.btn:focus-visible,.nav button:focus-visible,.tabs button:focus-visible{outline:3px solid #ffcd6e;outline-offset:2px}
@media(max-width:680px){
 .shell{padding:10px 9px calc(20px + env(safe-area-inset-bottom,0px))}
 .nav{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
 .nav button{font-size:11px;padding:8px 3px;border-radius:12px;min-height:46px}
 .top{padding:9px 10px;gap:5px}.brand{font-size:clamp(18px,6vw,25px)}
 .layout{grid-template-columns:minmax(0,1fr)}.panel{padding:13px}.panel h2{font-size:19px}
 .tabs{gap:5px}.tabs button{font-size:12px;padding:8px 4px;min-height:47px;border-radius:12px}
 .mini{padding:15px 9px}.mini .large{font-size:20px}
 .hero{min-height:500px}.room-actions{grid-template-columns:repeat(5,minmax(0,1fr))}
 .account-card{padding:13px}.account-status{align-items:flex-start;flex-direction:column;gap:3px}.account-status b{text-align:left}
}
@media(max-width:350px){.nav{grid-template-columns:repeat(3,minmax(0,1fr))}.tabs button{font-size:11px}.mini{padding:12px 5px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.account-shortcut{border:1px solid #a374da;background:linear-gradient(135deg,#6e3e99,#4a2b77);color:#fff;padding:7px 10px;border-radius:12px;font-size:17px;min-height:36px}.account-shortcut:focus-visible{outline:3px solid #ffd381}


/* PETOPIA 1.7 — Aurora mobile visual update. Presentation-only, no game-state changes. */
:root{--p17-bg:#120a25;--p17-panel:#29183f;--p17-outline:#8864a9;--p17-pink:#ff62c2;--p17-violet:#9b47f2;--p17-text:#f9edff;--p17-muted:#d9bddf}
html{scroll-behavior:smooth;scroll-padding-top:12px}
body{color:var(--p17-text);background:radial-gradient(ellipse 70% 30% at 0% 0%,#58206b 0,transparent 85%),radial-gradient(ellipse 95% 50% at 100% 75%,#4d2364 0,transparent 75%),var(--p17-bg)}
.shell{max-width:1040px}
.top{background:linear-gradient(115deg,#442055e8,#221537ef 65%,#39204c);border:1px solid #865ab4;box-shadow:0 10px 28px #14092070,inset 0 1px 0 #ffffff29;border-radius:22px}
.brand{background:linear-gradient(115deg,#fff 20%,#ffc0ec 65%,#e39bff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;letter-spacing:-.7px}
.money{background:linear-gradient(140deg,#442257,#301944);border:1px solid #a16abd;box-shadow:inset 0 1px #ffffff29,0 4px 12px #10082080}
.panel{background:linear-gradient(148deg,#44265d 0%,#302044 42%,#251838 100%);border-color:#795895;box-shadow:0 15px 36px #08041255,inset 0 1px #ffffff1c;border-radius:24px}
.panel h2{font-weight:850;letter-spacing:-.4px}
.nav{gap:8px;padding-bottom:14px}
.nav button{background:linear-gradient(160deg,#35204c,#25183c);border:1px solid #8665a4;border-radius:17px;font-weight:750;transition:background .14s,border-color .14s,transform .14s;box-shadow:inset 0 1px #ffffff18}
.nav button.active{background:linear-gradient(135deg,#ff49b5,#b02fe5 70%,#8239ed);border-color:#ff9ce9;box-shadow:0 8px 18px #bc32d65b,inset 0 1px #ffffff62}
.nav button:active,.btn:active,.action:active,.tabs button:active{transform:scale(.97)}
.btn{background:linear-gradient(135deg,#f455bd,#aa35e3 70%,#8243ed);border:1px solid #f69ade66;box-shadow:0 6px 18px #a332b153,inset 0 1px #ffffff57;min-height:43px}
.btn.gold{background:linear-gradient(180deg,#ffdb89,#ffa63b 55%,#ed7e0c);border-color:#ffe7a1;color:#442333}
.notice{background:linear-gradient(145deg,#613974,#4c2c63);border-color:#b77bbb;color:#fff0fb;line-height:1.52}
.small{color:#dfc7ec;line-height:1.48}
.item,.roomtile{background:linear-gradient(155deg,#38224f,#291b43);border-color:#80619e;box-shadow:inset 0 1px #ffffff18}
.item{border-radius:21px;padding:15px;overflow:hidden}
.item .emoji{filter:drop-shadow(0 7px 12px #09051c55)}
.tabs button{background:#311d4b;border-color:#8563a2;border-radius:15px}
.tabs .chosen{background:linear-gradient(135deg,#ef4cad,#af3ce7);border-color:#ffc0eb}
.mini{background:linear-gradient(180deg,#2b1a47,#25183b);border-color:#8256a6;border-radius:24px}
.hero{border-color:#b58ab8;box-shadow:0 16px 38px #13051f73,inset 0 1px #ffffff2e}
.room-actions .action,.action{background:linear-gradient(175deg,#8a4eac,#572e85);border-color:#ca91e8;border-radius:15px}
.track{background:#160f2d}.bar{background:linear-gradient(90deg,#ff65be,#cf5bef,#9659f5)}
/* Prevent avatar overflow on arena cards; stable layout on actual MAX WebView. */
.arena-avatar{height:200px;max-height:200px;width:100%;max-width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;isolation:isolate}
.arena-avatar>svg,.arena-avatar>.pet-avatar{height:185px!important;width:auto!important;max-height:100%!important;max-width:100%!important;display:block;flex:0 1 auto;object-fit:contain;transform:none!important;animation:none!important;filter:drop-shadow(0 8px 9px #14092350)}
.arena-avatar .small-pet{height:185px!important}
.roomtile{min-width:0;overflow:hidden}
.roomtiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.roomtile .emoji{font-size:clamp(42px,9vw,68px)}
.roomtile b,.roomtile h3{overflow-wrap:anywhere}
/* Improve touchability and keyboard access */
button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:focus-visible,.color-dot:focus-visible,.account-shortcut:focus-visible{outline:3px solid #ffdf97;outline-offset:2px}
.field input:focus,.field select:focus,.account-card input:focus{outline:2px solid #ef93e3;outline-offset:1px}
/* Real phone sizes: avoid edge collisions and oversize text. */
@media(max-width:680px){
 .shell{padding:10px 10px calc(24px + env(safe-area-inset-bottom,0px))}
 .panel{padding:16px;border-radius:21px}
 .panel h2{font-size:clamp(19px,5.2vw,24px)}
 .nav{gap:6px}
 .nav button{font-size:clamp(11px,3.25vw,14px);min-height:46px;padding:8px 2px;border-radius:13px;letter-spacing:-.12px}
 .roomtiles{gap:9px}
 .roomtile{padding:12px 8px;border-radius:16px}
 .arena-avatar{height:150px;max-height:150px}
 .arena-avatar>svg,.arena-avatar>.pet-avatar,.arena-avatar .small-pet{height:140px!important;max-height:100%!important}
 .btnrow .btn{flex:1 1 125px;white-space:normal;overflow-wrap:anywhere}
 .cardgrid{gap:9px}.item{padding:12px 9px;gap:8px}
 .item .emoji{font-size:clamp(36px,11vw,60px)}
 .item .name{overflow-wrap:anywhere}
 .mini{padding:15px 10px}
 .room-actions{gap:5px}
 .room-actions .action{line-height:1.2;min-height:64px}
 .room-actions .action span{font-size:clamp(17px,5vw,23px)}
}
@media(max-width:380px){
 .nav{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
 .nav button{font-size:10.2px;padding:7px 1px;min-height:45px}
 .panel{padding:12px}
 .top{padding:9px}
 .brand{font-size:19px}
 .roomtiles{grid-template-columns:repeat(2,minmax(0,1fr))}
 .arena-avatar{height:130px}
 .arena-avatar>svg,.arena-avatar>.pet-avatar,.arena-avatar .small-pet{height:125px!important}
 .roomtile{padding:10px 5px}
 .roomtile b{font-size:12px}
 .cardgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .item{padding:10px 6px}
}
@media(max-width:300px){.nav{grid-template-columns:repeat(2,minmax(0,1fr))}.roomtiles,.cardgrid{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* PETOPIA 1.8: real 3D WebGL stage with SVG fallback. */
.pet-graphic.pet3d-active{position:relative;isolation:isolate;animation:none!important;filter:none!important;transform:none!important;touch-action:pan-y;overflow:hidden;border-radius:20px;background:radial-gradient(ellipse at 50% 76%,#ffb2e72e,transparent 62%)}
.pet-graphic.pet3d-active>svg{visibility:hidden!important;position:absolute;inset:0;pointer-events:none;}
.pet3d-canvas{display:block;width:100%;height:100%;position:absolute;inset:0;touch-action:pan-y;cursor:grab;}
.pet3d-canvas:active{cursor:grabbing}
.pet-graphic.pet3d-active:after{content:'↔ Поверни питомца';position:absolute;bottom:4px;right:8px;border-radius:999px;padding:3px 7px;background:#180e2d99;color:#fbe8ff;font-size:10px;pointer-events:none}
@media(max-width:680px){.pet-graphic.pet3d-active{height:clamp(265px,80vw,340px);min-height:265px;max-width:100%}.hero .pet-stage{min-width:0}.room-head{z-index:4}}
@media(prefers-reduced-motion:reduce){.pet-graphic.pet3d-active{animation:none!important}}

.mode3d{color:#fff4ff;cursor:pointer;border:1px solid #f5b6eacc;background:#69437a!important;font-size:11px;min-height:32px;padding:5px 9px;touch-action:manipulation}
.mode3d:focus-visible{outline:2px solid #ffe5a8;outline-offset:2px}


/* PETOPIA 1.9 — full concept-inspired glossy design system, overlaying the tested 1.8 interface. */
:root { --royal:#6e27c2; --violet:#b63aff; --pink:#ff46c2; --gold:#ffd161; --line:#d7a7ff99; --surface:#2a1447; color-scheme:dark; }
html { background:#120526; }
body { color:#fff6ff;background:radial-gradient(ellipse 120% 38% at 50% -4%,#7d26be 0%,#3c155c 31%,transparent 70%),radial-gradient(ellipse 100% 50% at 15% 85%,#4a126f 0%,transparent 75%),#10051f; }
body:before {content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:url('/art/ambient.webp') center top / cover no-repeat;opacity:.16;}
.shell{max-width:1120px;padding:14px 12px calc(44px + env(safe-area-inset-bottom));}
.top{padding:10px 13px;margin-bottom:12px;min-height:69px;background:linear-gradient(120deg,#532078e8,#1d1039ee);border:1px solid #d49cfaa6;box-shadow:inset 0 1px #fff9,0 10px 27px #14051c80,0 0 24px #b839bd44;border-radius:22px;flex-wrap:nowrap;}
.brand{display:flex;align-items:center;gap:8px;letter-spacing:-1px;font-weight:1000;font-size:clamp(19px,4.6vw,30px);line-height:.98;text-shadow:0 2px 0 #6c2979,0 0 20px #fe53fa9c;min-width:0}
.brand .brand-icon{font-size:clamp(25px,6vw,39px);filter:drop-shadow(0 3px 6px #ff84f0aa)}
.brand .brand-name{white-space:nowrap}.brand .brand-name>span{color:#f7a9ff}.brand small{display:block;font-size:clamp(6px,1.5vw,9px);letter-spacing:1.8px;color:#ffd5fc;text-shadow:none;margin-top:5px}
.topmoney{flex-wrap:nowrap;gap:5px;align-items:center}.money{white-space:nowrap;padding:9px 11px;background:linear-gradient(165deg,#71339f,#311752);border:1px solid #d58ae8;box-shadow:0 2px 9px #1c073a,inset 0 2px 3px #ffffff33;border-radius:999px;font-size:12px}
.account-shortcut{border-radius:14px!important;background:linear-gradient(135deg,#8348bb,#4b2778)!important;border:1px solid #e39cf6!important;min-height:37px;min-width:39px}
.nav{background:linear-gradient(165deg,#2b1147ed,#1b0a33ef);border:1px solid #af68cb80;border-radius:19px;padding:9px;gap:7px;margin-bottom:12px;box-shadow:inset 0 1px #fff3,0 7px 18px #09011299}
.nav button{background:linear-gradient(160deg,#422265,#24133f);border:1px solid #b38ad2;box-shadow:inset 0 1px #ffffff2c,0 2px 7px #1704288a;border-radius:14px;font-weight:800;min-height:47px;text-shadow:0 1px 4px #120621}
.nav button.active{background:linear-gradient(135deg,#ff6ecf 0%,#e63ec4 35%,#9334f2 100%);border-color:#ffe2ff;box-shadow:inset 0 2px #fff8,0 0 17px #ff4dc199,0 5px 14px #8c198077}
.panel{position:relative;isolation:isolate;background:linear-gradient(150deg,#462061f5,#291447f5 58%,#1d1039f5);border:1px solid #bf83dabe;border-radius:23px;box-shadow:inset 0 1px #fff4,0 12px 34px #0a011d83;overflow:hidden;padding:20px}
.panel:before{content:"";position:absolute;left:-45px;top:-75px;width:230px;height:180px;border-radius:50%;background:radial-gradient(circle,#dd55f32a,transparent 70%);pointer-events:none;z-index:-1}
.panel h2{font-size:clamp(20px,5vw,26px);text-shadow:0 2px 11px #d844df77;line-height:1.2}
.panel p,.panel .small{line-height:1.5}
.hero{border-radius:26px;box-shadow:0 18px 40px #08001b9a,0 0 18px #bf4dda65,inset 0 1px #fff8;border:2px solid #d28dea;min-height:580px;background:linear-gradient(180deg,#41205f 0%,#8855aa 47%,#804b86 49%,#5c2c66 100%)}
.hero.room0,.hero.room1,.hero.room2,.hero.room3,.hero.room4{background:radial-gradient(ellipse 65% 47% at 50% 45%,#dc9dd489,transparent 78%),linear-gradient(180deg,#38205c 0%,#7751a1 47%,#a474ac 49%,#54295b 100%)}
.fantasy-room-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 55% 36% at 50% 53%,#ffbff35a,transparent 85%),radial-gradient(circle at 20% 20%,#d67fff3b,transparent 28%),radial-gradient(circle at 78% 12%,#ffd27842,transparent 25%);z-index:0}
.fantasy-lights{position:absolute;top:21%;left:12%;right:12%;display:flex;justify-content:space-between;pointer-events:none;font-size:30px;color:#fff2aa;text-shadow:0 0 14px #fff,0 0 30px #ff95e5;opacity:.75}
.hero::before{background:radial-gradient(ellipse at 50% 25%,#ffeaf557,transparent 55%),repeating-linear-gradient(90deg,transparent 0 70px,#ffffff08 72px 74px)}
.hero .window{filter:drop-shadow(0 0 18px #d878f6ad)}
.room-head{gap:6px;flex-wrap:wrap;padding:13px}.chip{color:#fff;box-shadow:inset 0 1px #fff5,0 3px 9px #15082f;background:#311644dd;border:1px solid #ffcffb;min-height:34px;font-size:clamp(11px,2.5vw,13px)}
.pet-stage{position:relative;z-index:2}.pet-name{font-size:clamp(26px,7vw,42px);font-weight:1000;text-shadow:0 3px 0 #652c7b,0 0 19px #ff9cea}
.pet-graphic:not(.pet3d-active){filter:drop-shadow(0 10px 16px #301147a8) drop-shadow(0 0 13px #fba2f48a)}
.pet-graphic.pet3d-active{background:radial-gradient(ellipse at 50% 75%,#fcaaf84d,transparent 64%);border:1px solid #ffd5f225;border-radius:26px}
.room-actions{z-index:4;position:relative;width:calc(100% - 22px);margin:0 11px 12px;padding:5px;background:#2d1649ac;border:1px solid #d990de6b;border-radius:18px;backdrop-filter:blur(5px)}
.room-actions .action{border:1px solid #df9dfc;border-radius:16px;background:linear-gradient(165deg,#9253b7,#592a88 65%,#3a1f6f);box-shadow:inset 0 2px #ffffff5c,0 4px 12px #17012888;text-shadow:0 1px 3px #19071f}
.btn,.tabs button{border-radius:15px;box-shadow:inset 0 1px #fff5,0 4px 13px #0e06267d}
.btn:not(.subtle),.tabs .chosen{background:linear-gradient(180deg,#ff72db,#e234b5 50%,#9d2fea);border-color:#ffc5f3;color:white;text-shadow:0 1px 4px #410d3b}
.btn.gold{background:linear-gradient(180deg,#fff2a9,#ffd45d 40%,#f49a17 75%,#cb6400)!important;color:#592500!important;border:1px solid #fff4be!important;text-shadow:0 1px #fff4!important;box-shadow:inset 0 2px #fff9,0 5px 17px #ff9d1970}
.item,.roomtile,.mini,.family-couple{border:1px solid #c28cda;background:linear-gradient(165deg,#42235f,#25133e);box-shadow:inset 0 1px #ffffff30,0 7px 19px #0b061954;border-radius:20px}
.item .emoji{filter:drop-shadow(0 4px 6px #ff79be44)}
.item .name{font-weight:900}
.item:has(.emoji){background:radial-gradient(ellipse 85% 50% at 50% 10%,#b448a239,transparent 75%),linear-gradient(150deg,#3c205c,#23143d)}
.item.pet-card.owned{border-color:#f3a2fb;box-shadow:0 0 19px #de51eb55,inset 0 1px #fff6}
.roomtiles{gap:12px}
.roomtile{padding:15px;min-width:0}
.arena-avatar{height:170px!important;min-height:0!important;max-height:170px!important;overflow:hidden;display:flex;justify-content:center}
.arena-avatar svg{max-height:100%!important;height:100%!important;width:auto!important;max-width:100%!important}
.arena-panel .roomtiles{background:radial-gradient(ellipse at center,#b738bd26,transparent 75%);border-radius:21px}
.arena-panel .roomtile{background:linear-gradient(170deg,#543177,#261647);text-align:center}
.feature-banner{position:relative;isolation:isolate;overflow:hidden;min-height:130px;border-radius:21px;margin-bottom:17px;padding:18px 19px;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #f9b5f0c2;background:radial-gradient(ellipse at 86% 20%,#f477cb88,transparent 45%),linear-gradient(135deg,#8c31bb,#502078 70%,#391b67);box-shadow:inset 0 2px #fff5,0 7px 18px #0d032888}
.feature-banner:before{content:'';position:absolute;inset:0;background:url('/art/ambient.webp') center center / cover;opacity:.26;z-index:-1}
.feature-banner h2{font-size:clamp(19px,5vw,28px);margin:5px 0}.feature-banner p{font-size:13px;margin:0;color:#ffdbfb}.overline{font-size:10px;font-weight:950;letter-spacing:2px;color:#ffe999;text-shadow:0 0 11px #ffb8f9}
.banner-sticker{font-size:clamp(48px,15vw,86px);filter:drop-shadow(0 0 17px #ffabf0);flex:none}
.shop-banner{background:radial-gradient(circle at 88% 50%,#ffca7c88,transparent 40%),linear-gradient(120deg,#7d29a2,#3d235d)}
.games-banner{background:radial-gradient(circle at 85% 40%,#a1baff77,transparent 40%),linear-gradient(110deg,#592ca4,#44206c)}
.arena-banner{background:radial-gradient(circle at 86% 40%,#ffcc648c,transparent 45%),linear-gradient(110deg,#8d278d,#341d66)}
.collection-banner{background:radial-gradient(circle at 85% 40%,#ff94cc66,transparent 45%),linear-gradient(110deg,#8d338d,#3d246b)}
.family-banner{background:radial-gradient(circle at 85% 40%,#ffb4da90,transparent 45%),linear-gradient(110deg,#b13c8b,#3b206d)}
.welcome-art{min-height:270px;border-radius:22px;position:relative;overflow:hidden;margin:0 0 14px;border:1px solid #f3b3fb;background:linear-gradient(180deg,transparent 0%,#30164dcc 95%),url('/art/pet-heroes.webp') center 37% / cover no-repeat;box-shadow:0 6px 23px #13012299,inset 0 0 18px #ff84dc88}
.welcome-art:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#280b4799,transparent 62%),linear-gradient(0deg,#2b103ccf,transparent 70%)}
.welcome-art-inner{position:absolute;left:17px;bottom:16px;max-width:65%;text-shadow:0 2px 8px #15031d}.welcome-art h1{font-size:clamp(22px,6vw,36px);line-height:1.06;margin:7px 0}.welcome-art p{font-size:12px;line-height:1.4;margin:0}
.form{max-width:780px;margin:auto}.form .pet-choice button.selected{box-shadow:0 0 18px #fd76d7ad,inset 0 2px #fff7}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.footer{opacity:.8}
@media(max-width:680px){
 .shell{padding:8px 9px calc(20px + env(safe-area-inset-bottom));}
 .top{padding:9px 10px;gap:4px;min-height:58px;border-radius:17px}
 .brand .brand-icon{font-size:26px}
 .topmoney .money{padding:7px 7px;font-size:11px}
 .account-shortcut{min-width:31px!important;min-height:32px!important;padding:6px!important}
 .nav{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:7px;border-radius:16px}
 .nav button{min-height:46px;font-size:clamp(10px,2.85vw,13px);padding:8px 1px;border-radius:12px}
 .panel{padding:14px;border-radius:20px}
 .hero{min-height:520px;border-radius:22px}
 .room-head{padding:9px;gap:4px}
 .chip{padding:5px 6px;min-height:29px}
 .room-actions{width:calc(100% - 12px);margin:0 6px 7px;gap:3px;padding:4px}
 .room-actions .action{min-width:0;min-height:64px;padding:6px 2px;font-size:clamp(10px,2.7vw,13px);border-radius:11px}
 .room-actions .action span{font-size:23px}
 .feature-banner{min-height:110px;padding:13px}
 .banner-sticker{font-size:43px}
 .welcome-art{min-height:240px;background-position:center 35%}
 .welcome-art-inner{max-width:75%}
 .arena-avatar{height:125px!important;max-height:125px!important}
 .roomtile{padding:10px 7px}
 .roomtile b{font-size:12px}
 .cardgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .tabs button{font-size:clamp(11px,3.3vw,14px)}
}
@media(max-width:350px){.brand{font-size:18px}.brand small{letter-spacing:1px}.topmoney .money{font-size:10px;padding:6px 5px}.nav{gap:3px}.nav button{font-size:9.7px}.feature-banner .banner-sticker{font-size:36px}.welcome-art-inner{max-width:88%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* PETOPIA 1.9.1: blend the WebGL room into the house screen.
   The 2D decorations and WebGL backdrop must not be displayed simultaneously. */
.hero.room-3d-mode{background:linear-gradient(180deg,#4e315d 0%,#4e315d 48%,#aa719b 49%,#aa719b 100%)!important;}
.hero.room-3d-mode .window,
.hero.room-3d-mode .room-wall-art,
.hero.room-3d-mode .room-floor-rug,
.hero.room-3d-mode .room-baseboard,
.hero.room-3d-mode .decor,
.hero.room-3d-mode .fantasy-room-glow,
.hero.room-3d-mode .fantasy-lights,
.hero.room-3d-mode .room-sparkle{display:none!important;}
.hero.room-3d-mode .pet-stage{padding-top:5px!important;width:100%;min-width:0;}
.hero.room-3d-mode .pet-graphic.pet3d-active{width:100%!important;max-width:100%!important;height:clamp(295px,88vw,405px)!important;min-height:295px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;margin:0!important;}
.hero.room-3d-mode .pet3d-canvas{width:100%!important;height:100%!important;max-width:100%!important;border:0!important;}
.hero.room-3d-mode .pet-name{position:relative;z-index:2;}
.hero.room-3d-mode .room-head{z-index:5;position:relative;}
/* Keep panels, shop grids and action controls from overflowing narrow MAX WebViews. */
.shell,.layout,.panel,.hero,.item,.roomtile{min-width:0;}
button,input,select{max-width:100%;}
.nav button,.tabs button,.action{overflow-wrap:anywhere;}
.roomtiles,.cardgrid{min-width:0;}
@media(max-width:680px){
 .hero.room-3d-mode .pet-graphic.pet3d-active{height:clamp(290px,89vw,385px)!important;}
 .hero.room-3d-mode .pet-stage{padding-top:2px!important;}
 .hero.room-3d-mode .pet-name{margin-top:2px;}
 .room-head .chip{font-size:clamp(10px,2.55vw,13px)!important;white-space:normal;text-align:center;}
 .room-actions{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));}
 .room-actions .action{min-width:0!important;}
 .feature-banner h2{overflow-wrap:anywhere;}
}
@media(max-width:365px){
 .room-head{align-items:stretch;}
 .room-head .chip{flex:1 1 28%;}
 .room-actions .action{font-size:10px!important;}
}


/* PETOPIA 2.0 — Visual Rebuild. Only UI; server, user state, MAX and email APIs untouched. */
:root {color-scheme:dark;--pink:#ff56cf;--violet:#8f35ea;--gold:#ffd670}
html,body{overflow-x:clip;overscroll-behavior-x:none}
body{background:radial-gradient(circle at 8% 8%,#7c26ac5c,transparent 26%),radial-gradient(circle at 90% 58%,#6f1bad5c,transparent 30%),linear-gradient(180deg,#150924,#200b35 60%,#110721)!important}
.shell{max-width:1130px;margin:0 auto; padding-bottom:110px}
.top{background:linear-gradient(125deg,#55207ac9,#280f49db 60%,#251042e8);box-shadow:inset 0 1px #ffe7ff9c,0 10px 30px #080312;overflow:hidden}
.brand-name{letter-spacing:.8px}
.brand-icon{filter:drop-shadow(0 0 10px #ef7bff)}
.nav{position:sticky;top:0;z-index:45;grid-template-columns:repeat(5,minmax(0,1fr));background:#29103de8;backdrop-filter:blur(12px);box-shadow:0 8px 25px #10021eaa}
.nav button{min-width:0;white-space:normal}
.menu-shade{position:fixed;inset:0;z-index:65;background:#090316ad;backdrop-filter:blur(4px)}
.extra-menu{position:fixed;z-index:70;width:min(calc(100% - 24px),520px);left:50%;transform:translateX(-50%);bottom:max(14px,env(safe-area-inset-bottom));padding:17px;border-radius:24px;background:linear-gradient(155deg,#623084,#230f3d 75%);border:1px solid #e7a4f9;box-shadow:0 20px 65px #090117e8,inset 0 1px #fff6;color:white}
.extra-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;font-size:18px}.extra-heading button{min-width:42px;min-height:42px;border:1px solid #edc0fc;color:white;background:#522c70;border-radius:12px}
.extra-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.extra-grid button{min-height:59px;border:1px solid #b885d6;border-radius:15px;color:#fff;background:#3c1b5d;font-weight:750;font-size:15px}.extra-grid button.active{background:linear-gradient(130deg,#ff4dc7,#8532f3)}
.panel,.item,.roomtile,.mini,.family-couple{background-image:linear-gradient(145deg,#51236ac9,#281240e8 78%);box-shadow:inset 0 1px #ffffff3b,0 8px 21px #09021182}
.feature-banner{min-height:126px;background-image:linear-gradient(115deg,#a639a4cc,#502186a3),url('/art/ambient.webp');background-size:cover;background-position:center}
.feature-banner h2{font-weight:900;letter-spacing:-.025em}.feature-banner p{max-width:32ch}
/* The illustrated room is an honest 2.5D option, not claimed as a 3D model. */
.hero.art-room{background:linear-gradient(180deg,#23123e4d 5%,#23123e28 65%,#36164c 100%),url('/art/concept-house.webp') center 36% / cover no-repeat!important}
.hero.art-room .art-room-scene{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,#190c308c 0%,transparent 20%,transparent 62%,#190d32b8 100%)}
.hero.art-room .window,.hero.art-room .room-wall-art,.hero.art-room .room-floor-rug,.hero.art-room .room-baseboard,.hero.art-room .decor,.hero.art-room .fantasy-lights,.hero.art-room .fantasy-room-glow{display:none!important}
.hero.art-room .pet-stage{position:relative;min-height:355px;display:flex;flex-direction:column;justify-content:end;align-items:center;padding-top:35px;padding-bottom:10px;background:radial-gradient(ellipse at 50% 60%,#fca2e329,transparent 60%)}
.hero.art-room .pet-graphic{width:min(76%,290px);height:245px;position:relative;filter:drop-shadow(0 7px 0 #2d163c8c) drop-shadow(0 0 18px #f4baff8c)!important;transform:translateZ(0);animation:pet-bob 3.2s ease-in-out infinite}
@keyframes pet-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.hero.art-room .pet-name{font-size:clamp(25px,6vw,40px);color:#fff}
.hero.art-room .speech{top:35px;right:17%}
.hero.art-room .room-head{position:relative;z-index:3}
.hero.art-room .room-actions{backdrop-filter:blur(9px);background:#2c104ecb}
.hero:not(.art-room) .art-room-scene{display:none}
.hero.room-3d-mode .art-room-scene{display:none}
/* 3D beta now has a deliberate stage, instead of the unframed block covering room art. */
.hero.room-3d-mode .pet-graphic.pet3d-active{height:clamp(260px,70vw,400px)!important;width:min(100%,520px)!important;margin:auto!important;border-radius:20px!important;overflow:hidden!important}
.room-head{display:flex;gap:7px}.chip{font-weight:750}
.room-actions .action{transition:transform .14s ease,filter .14s ease}.room-actions .action:active{transform:scale(.94)}
.item{overflow:hidden;min-width:0}.item .emoji{display:grid;place-items:center;border-radius:18px;margin:4px auto 12px;background:radial-gradient(circle,#e989ff47,transparent 70%);text-shadow:0 0 21px #fbd5ff;font-size:clamp(46px,10vw,70px);min-height:86px}
.item .btn{min-height:43px}
.cardgrid{gap:12px}.pet-card .pet-avatar{max-height:220px!important}
.arena-panel .roomtiles{align-items:stretch}
.arena-panel .roomtile{min-height:210px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.arena-avatar{width:100%;max-width:100%;overflow:hidden}
.mini{max-width:100%;overflow:hidden}
.mini .game-button{filter:drop-shadow(0 8px 18px #db63f588)}
input,select{font-size:16px!important}
button{touch-action:manipulation}
:focus-visible{outline:3px solid #ffe88c!important;outline-offset:3px}
.footer{font-size:11px;opacity:.72}
@media(max-width:680px){
  .shell{padding:7px 8px calc(110px + env(safe-area-inset-bottom))}
  .nav{position:fixed;top:auto;left:0;right:0;bottom:0;padding:7px 8px max(8px,env(safe-area-inset-bottom));border-radius:18px 18px 0 0;border:1px solid #c87de6;border-bottom:0;gap:5px;grid-template-columns:repeat(5,minmax(0,1fr));z-index:45}
  .nav button{font-size:clamp(10px,2.5vw,13px);min-height:55px;padding:6px 2px;border-radius:12px;line-height:1.2}
  .panel{padding:13px;border-radius:18px}
  .feature-banner{min-height:112px;padding:14px}
  .hero{min-height:515px}
  .hero.art-room .pet-stage{min-height:335px}
  .hero.art-room .pet-graphic{height:235px}
  .hero.art-room .room-actions{position:relative;margin-top:5px}
  .room-head{justify-content:space-between}
  .room-head .chip{font-size:clamp(10px,2.5vw,13px)}
  .cardgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .item{padding:10px!important}
  .item .btn{padding:9px 5px;font-size:clamp(12px,3vw,15px)}
  .item .emoji{min-height:67px;font-size:48px}
  .arena-panel .roomtile{min-height:190px}
  .arena-avatar{height:135px!important;max-height:135px!important}
  .extra-menu{bottom:calc(75px + env(safe-area-inset-bottom))}
  .tabs button{min-width:0}
}
@media(max-width:360px){.room-actions .action span{font-size:20px}.room-actions .action{font-size:10px}.topmoney{gap:3px}.topmoney .money{padding:5px}.nav{gap:3px}}
@media(prefers-reduced-motion:reduce){.hero.art-room .pet-graphic{animation:none}}

/* PETOPIA 2.1: 3D studio stage - unified lighting and reduced visual noise. */
.hero.room-3d-mode{background:linear-gradient(180deg,#563566 0%,#906ca1 57%,#ba86ae 100%)!important;}
.hero.room-3d-mode .pet-graphic.pet3d-active{width:min(100%,540px)!important;height:clamp(310px,102vw,495px)!important;max-height:60vh!important;border:1px solid #e8c5f25c!important;border-radius:24px!important;background:linear-gradient(180deg,#64447711,#d4a4c511)!important;box-shadow:inset 0 0 30px #f1cbff18,0 12px 28px #32143a44!important;}
.hero.room-3d-mode .pet-graphic.pet3d-active:after{content:'↔ Поверни Мию'!important;bottom:12px;right:12px;background:#2b153edb;padding:7px 10px;font-size:12px;letter-spacing:.01em;}
.hero.room-3d-mode .pet3d-canvas{touch-action:pan-y!important;}
@media(max-width:680px){
.hero.room-3d-mode .pet-graphic.pet3d-active{height:clamp(320px,102vw,440px)!important;max-height:none!important;}
.hero.room-3d-mode .pet-stage{min-height:0;padding:0!important;}
.hero.room-3d-mode .room-head{flex-wrap:wrap;}
.hero.room-3d-mode .room-head .chip{font-size:clamp(10px,2.7vw,13px);}
}
@media(prefers-reduced-motion:reduce){.hero.room-3d-mode .pet-graphic.pet3d-active{animation:none!important;}}