/* Identidade visual do hospital. Camada de tema sobre os componentes do jogo. */
:root {
  --pink:#fa829b;
  --pink-d:#d95c7e;
  --pink-l:#ffe4eb;
  --mint:#82d9c2;
  --mint-d:#3aa992;
  --mint-l:#dcf8ed;
  --sun:#ffcd6b;
  --sun-d:#d79b33;
  --sun-l:#fff3d7;
  --blue:#91c8f1;
  --blue-d:#529cd0;
  --blue-l:#e7f4ff;
  --lilac:#cbb8f5;
  --lilac-d:#9273ca;
  --ink:#34454b;
  --ink-soft:#71838b;
  --card:#fffefa;
  --shadow:0 10px 26px rgba(60,92,96,.10), 0 2px 4px rgba(60,92,96,.06);
  --round:26px;
}
html { font-size:16px; }
body {
  font-family:'Nunito','Trebuchet MS',system-ui,sans-serif;
  font-weight:700;
  background:#e8f5f0;
  color:var(--ink);
}
button,input { font:inherit; }
button { touch-action:manipulation; }
button:focus-visible, input:focus-visible {
  outline:3px solid #258e91;
  outline-offset:4px;
}
button:not(:disabled) { -webkit-tap-highlight-color:transparent; }
.screen.active { animation:screenIn .38s cubic-bezier(.2,.7,.2,1); }
h1,h2,h3,h4,h5,.room-card b,.mp-info b,.qc-info b {
  font-family:'Fredoka','Nunito',system-ui,sans-serif;
  font-weight:600;
  letter-spacing:-.025em;
}
p { line-height:1.45; }
.btn {
  border:2px solid rgba(255,255,255,.62);
  border-radius:18px;
  font-size:17px;
  font-weight:900;
  letter-spacing:.005em;
  color:#37464a;
  box-shadow:0 5px 0 var(--pink-d),0 12px 20px rgba(83,65,74,.14);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.btn:hover:not(:disabled) { filter:brightness(1.045); transform:translateY(-2px); }
.btn:active:not(:disabled) { transform:translateY(4px); }
.btn-mint { box-shadow:0 5px 0 var(--mint-d),0 12px 20px rgba(58,124,112,.13); }
.btn-sun { box-shadow:0 5px 0 var(--sun-d),0 12px 20px rgba(120,84,35,.13); }
.btn-blue { box-shadow:0 5px 0 var(--blue-d),0 12px 20px rgba(35,81,120,.12); }
.btn-ghost {
  border:2px solid #dfebe8;
  box-shadow:0 5px 0 #dae8e2,0 12px 20px rgba(70,87,91,.08);
}
.btn-big { font-size:21px; min-width:0; padding:13px 26px; }
.icon-btn {
  background:rgba(255,255,255,.94);
  border:2px solid rgba(92,156,148,.14);
  box-shadow:var(--shadow);
  color:var(--ink);
}
.icon-btn:hover { transform:translateY(-2px); }
.topbar {
  min-height:80px;
  padding:14px clamp(15px,3vw,34px);
  background:rgba(255,254,250,.82);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(102,164,152,.16);
}
.topbar h2 { font-size:clamp(21px,3.8vw,29px); }
.wallet { align-items:center; gap:9px; }
.chip {
  padding:8px 15px;
  border:1px solid #e7efea;
  box-shadow:0 3px 10px rgba(71,102,102,.07);
  font-family:'Fredoka',system-ui,sans-serif;
  font-size:18px;
  font-weight:600;
}
.chip.coin b { color:#ba8b31; }
.chip.star b { color:#8b6bc1; }

/* Tela de boas-vindas */
#scr-menu {
  isolation:isolate;
  background:
    radial-gradient(ellipse at 77% 12%,#fff2cc 0,transparent 35%),
    radial-gradient(ellipse at 12% 91%,#ffdbe3 0,transparent 45%),
    linear-gradient(138deg,#e9fbf5 6%,#e5f5fd 52%,#fff5ea 100%);
}
#scr-menu::after {
  content:'';
  position:absolute;
  z-index:0;
  width:min(66vw,770px);
  aspect-ratio:1;
  border:2px dashed rgba(80,172,155,.18);
  border-radius:50%;
  right:-15%;
  bottom:-46%;
  pointer-events:none;
}
.menu-sky { pointer-events:none; }
.sun {
  top:5%;right:10%;width:140px;height:140px;
  background:radial-gradient(circle at 40% 35%,#fffad5,#ffde96);
  box-shadow:0 0 90px rgba(255,207,111,.34);
  opacity:.82;
}
.cloud { opacity:.62;box-shadow:0 4px 22px rgba(113,186,189,.09); }
.menu-content {
  position:relative;
  flex:0 0 auto;
  width:min(530px,calc(100% - 36px));
  margin:clamp(48px,8vh,88px) auto 0;
  padding:25px 28px 22px;
  gap:16px;
  border-radius:38px;
  background:rgba(255,255,255,.83);
  border:2px solid rgba(255,255,255,.95);
  box-shadow:0 18px 55px rgba(78,122,125,.14),inset 0 2px 0 #fff;
  backdrop-filter:blur(13px);
}
.menu-eyebrow {
  margin:0;
  color:#329785;
  font-size:12px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.20em;
}
.logo { gap:7px;animation:none; }
.logo-badge {
  width:86px;height:86px;
  filter:drop-shadow(0 8px 10px rgba(82,115,105,.14));
}
.logo h1 {
  color:#35575b;
  font-size:clamp(36px,6vw,57px);
  line-height:.98;
  text-shadow:none;
  letter-spacing:-.045em;
}
.logo h1 span {
  color:#ee7796;
  text-shadow:none;
}
.menu-subtitle {
  margin:0;
  max-width:330px;
  line-height:1.42;
  color:#72888c;
  font-size:15px;
}
.menu-buttons {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  width:100%;
  max-width:370px;
  gap:12px;
}
.menu-buttons .btn:first-child { grid-column:1/-1; }
.menu-buttons .btn { min-width:0; padding:12px 12px; font-size:16px; white-space:normal; line-height:1.22; }
.menu-buttons .btn:first-child { padding:14px 12px;font-size:20px; }
.menu-tip {
  margin:4px 0 0;
  padding:7px 14px;
  background:#f1faf5;
  border:1px solid #e1f2e9;
  font-size:12px;
  color:#5c8f81;
  white-space:normal;
}
.menu-sound { top:18px;left:18px;z-index:4; }
.menu-pets {
  bottom:-10px;
  height:clamp(135px,27vh,240px);
  max-height:none;
  gap:0;
}
.menu-pets .mp { width:clamp(66px,16vw,154px); }
.menu-pets .mp:nth-child(even) { animation-delay:.55s; }
.menu-pets .mp:nth-child(3n) { animation-delay:1.1s; }
.menu-pets .mp svg { filter:drop-shadow(0 10px 8px rgba(57,76,73,.13)); }
.studio-menu-link{display:inline-flex;align-items:center;justify-content:center;padding:9px 14px;border:1px solid #e5d8f7;border-radius:40px;background:#f9f2ff;color:#9872bd;font-weight:900;font-size:12px;text-decoration:none;box-shadow:0 4px 12px #9577b11a;transition:transform .18s,background .18s}
.studio-menu-link:hover{background:#f1e5fd;transform:translateY(-2px)}

/* Seleção e identidade do veterinário */
#scr-avatar {
  background:
    radial-gradient(circle at 80% 24%,#fff1cc 0,transparent 31%),
    linear-gradient(145deg,#e6f7f0,#f0edfd 58%,#fff1ed);
}
.avatar-wrap { max-width:1100px;width:100%;margin:0 auto;gap:14px; }
.avatar-preview {
  position:relative;
  background:radial-gradient(circle at 50% 58%,#fffefa 0 34%,rgba(255,255,255,0) 65%);
}
.avatar-preview::before {
  content:'';
  position:absolute;inset:7% 24% 0;
  border-radius:45% 45% 18% 18%;
  border:3px dashed rgba(98,166,156,.22);
  pointer-events:none;
}
.avatar-preview svg { position:relative;filter:drop-shadow(0 17px 12px rgba(64,85,99,.14)); }
.avatar-options {
  background:rgba(255,255,255,.80);
  border:1px solid #fff;
  border-radius:25px;
  padding:15px 18px 10px;
  box-shadow:var(--shadow);
}
.opt-row h4 { color:#51696d; font-size:16px; }
.sw {
  border:2px solid #e6eeea;
  box-shadow:0 3px 9px rgba(68,95,97,.07);
  border-radius:14px;
}
.sw.on {
  border-color:var(--mint-d);
  background:#e3f9f0;
  box-shadow:0 0 0 3px #c7f0e3;
}
.avatar-footer {
  padding:12px clamp(14px,3vw,30px) calc(16px + var(--safe-b));
  background:rgba(255,255,255,.87);
  border-top:1px solid #e7eeeb;
}
.name-input { border:2px solid #dbece7;border-radius:17px;box-shadow:inset 0 2px 5px rgba(82,106,105,.05); }
.name-input:focus { border-color:var(--mint-d); }

/* Planta do hospital */
#scr-map {
  background:
    radial-gradient(ellipse at 90% 12%,#fff0d9 0,transparent 40%),
    linear-gradient(160deg,#eaf8f3,#f2f7fd 52%,#fff4f3);
}
.map-body { padding:24px clamp(16px,4vw,38px) calc(34px + var(--safe-b)); }
.map-title { color:#405a60;font-size:clamp(24px,4vw,30px);margin:24px 0 17px;text-align:left; }
.map-title::before { content:'✦';color:#ec96a4;margin-right:10px; }
.map-patient {
  margin-bottom:18px;
  padding:16px 23px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:27px;
  background:rgba(255,255,255,.88);
  box-shadow:var(--shadow);
}
.map-patient .mini-pet { width:clamp(74px,12vw,108px); }
.map-patient .mp-info b { font-size:24px; }
.map-patient .mp-info span { font-size:14px; }
.map-patient.empty { padding:24px; }
.bar .track,.stat-pill .track { background:#eaf0ec; }
.bar .fill,.stat-pill .fill { box-shadow:inset 0 -1px 2px rgba(0,0,0,.07); }
.rooms-grid { grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:15px; }
.room-card {
  gap:7px;
  min-height:205px;
  padding:15px 13px 19px;
  border:2px solid rgba(255,255,255,.95);
  background:#fffefa;
  box-shadow:0 9px 20px rgba(77,110,113,.1),0 2px 3px rgba(77,110,113,.045);
  border-radius:25px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.room-card::before {
  content:'';
  width:calc(100% - 22px);height:106px;
  position:absolute;left:11px;top:11px;
  border-radius:17px;
  background:#e5f7f1;
}
.room-card:nth-child(3n+2)::before { background:#fff0df; }
.room-card:nth-child(3n+3)::before { background:#eeebfa; }
.room-card:hover {
  transform:translateY(-5px);
  border-color:#bce7d9;
  box-shadow:0 17px 28px rgba(77,110,113,.16);
}
.room-card:active { transform:translateY(2px) scale(.99); }
.room-card .rc-art { position:relative;width:105px;height:96px;z-index:1; }
.room-card b { position:relative;font-size:19px;line-height:1.08; }
.room-card small { position:relative;font-size:12px;line-height:1.35;max-width:175px; }
.room-card .badge { top:12px;right:12px;box-shadow:0 2px 0 var(--pink-d);z-index:2; }

/* Consultórios e jogos */
#scr-room { background:#e8f1ed; }
.stage {
  background:
    linear-gradient(90deg,rgba(255,255,255,.26) 1px,transparent 1px) 0 0 / 36px 36px,
    #ecf2ee;
}
.room-top {
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.65));
  border-bottom:1px solid rgba(255,255,255,.55);
  min-height:76px;
  z-index:10;
}
.room-top h2 { color:#395760;text-shadow:none; }
.scene .bg { filter:saturate(.92); }
.pet-slot svg { filter:drop-shadow(0 16px 13px rgba(57,81,85,.2)); }
.pet-stats { top:89px;left:clamp(9px,3vw,26px); }
.stat-pill {
  border:1px solid #e6f0ea;
  border-radius:13px;
  box-shadow:var(--shadow);
  font-size:13px;
  padding:6px 9px;
}
.task-card {
  top:89px;right:clamp(9px,3vw,26px);
  max-width:min(46%,270px);
  border:1px solid #e2eee8;
  border-radius:17px;
  padding:11px 14px;
  font-size:13px;
}
.task-card h5 { color:#bd6280;font-size:15px; }
.hint-bubble {
  border:2px solid #e8f4ed;
  box-shadow:0 8px 20px rgba(55,86,88,.12);
  font-size:14px;
  padding:9px 14px;
}
.tray {
  min-height:118px;
  justify-content:center;
  padding:14px clamp(12px,3vw,30px) calc(16px + var(--safe-b));
  border-top:2px solid #dfeee7;
  background:rgba(255,254,250,.97);
  box-shadow:0 -9px 24px rgba(54,88,89,.07);
  scrollbar-width:thin;
}
.tool {
  height:85px;width:82px;
  border:2px solid #e2eee9;
  border-radius:18px;
  background:linear-gradient(170deg,#fff,#f6fbf8);
  color:#547179;
  box-shadow:0 5px 12px rgba(64,98,99,.09);
  font-size:12px;
}
.tool:hover { border-color:#b2e7d8; }
.tool.hi { border-color:var(--sun-d);background:#fff8e7; }
.tray-msg { color:#5b797d; }
.queue { gap:13px; }
.queue-card {
  padding:10px 18px;
  border:1px solid #e7f0ed;
  box-shadow:var(--shadow);
}
.queue-card:hover { background:#f6fffb; }
.queue-card .qc-pet { width:90px; }
.queue-card .qc-info b { font-size:22px; }
.queue-card .qc-go { color:#4ba995; }
.shop-item {
  border:2px solid #e3eee9;
  box-shadow:var(--shadow);
  background:#fffefa;
}
.shop-item.owned { border-color:var(--mint-d); }
.shop-item.equipped { border-color:var(--pink-d);background:#fff0f2; }
.shop-item .price { color:#b88b2e; }

/* Coleção, feedback e modais */
#scr-album {
  background:linear-gradient(153deg,#eff8f2,#fff4e9 58%,#f8edf6);
}
.album-body { padding:22px clamp(16px,4vw,36px) calc(32px + var(--safe-b)); }
.album-body h3 { margin:18px 0 11px!important;color:#516a70;font-size:23px; }
.album-stat {
  padding:20px;
  border:1px solid #fff;
  gap:18px;
}
.album-stat div b { font-size:28px;color:#388f85; }
.album-grid { grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:15px; }
.sticker {
  border:2px solid #fff;
  border-radius:24px;
  background:linear-gradient(155deg,#fff,#fdf4e9);
  box-shadow:var(--shadow);
}
.sticker.locked {
  border-color:#e6ebe6;
  background:#eef2ee;
  color:#a4b5af;
  box-shadow:inset 0 2px 7px rgba(75,97,93,.08);
}
.sticker small { color:#667c80;font-size:11px; }
.overlay { background:rgba(30,56,63,.51);backdrop-filter:blur(8px); }
.dialog {
  border:3px solid rgba(255,255,255,.97);
  border-radius:30px;
  box-shadow:0 28px 70px rgba(37,56,62,.25);
}
.dialog h3 { color:#45696d; }
.reward { background:#f5fdf7;box-shadow:inset 0 0 0 2px #d9f0e4; }
.toast {
  background:#355c60;
  box-shadow:0 10px 22px rgba(46,77,77,.18);
}

@media (min-width:840px) {
  .menu-content {
    margin:auto 0 auto clamp(6%,10vw,15%);
    width:min(480px,45%);
    padding:37px 32px;
    gap:19px;
  }
  .menu-pets {
    left:52%;right:1.5%;bottom:9%;
    width:46.5%;height:auto;
    min-height:235px;
    flex-wrap:wrap;
    justify-content:center;
    align-content:center;
    align-items:flex-end;
  }
  .menu-pets .mp { width:clamp(108px,11.5vw,163px);margin:0 -9px -14px; }
  .logo-badge { width:104px;height:104px; }
  .avatar-wrap { flex-direction:row;align-items:stretch;padding:15px 24px; }
  .avatar-preview { flex:1;min-height:0; }
  .avatar-preview svg { height:min(62vh,420px); }
  .avatar-options { flex:1;max-height:none;overflow-y:auto;align-self:stretch; }
  .avatar-footer { justify-content:center; }
  .avatar-footer .name-input { max-width:360px; }
  .rooms-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:20px; }
  .map-body,.album-body { max-width:990px; }
  .pet-slot { width:min(29vw,355px);bottom:8%; }
  .scene .queue,.scene .shop-grid { top:94px; }
}
@media (max-width:520px) {
  .topbar { min-height:70px;padding:9px 12px; }
  .icon-btn { width:45px;height:45px;font-size:21px; }
  .topbar .spacer { width:45px; }
  .topbar h2 { font-size:21px; }
  .chip { padding:7px 10px;font-size:16px; }
  .menu-content { margin-top:clamp(35px,6vh,66px);padding:19px 18px 17px;gap:11px; }
  .logo-badge { width:72px;height:72px; }
  .logo h1 { font-size:clamp(30px,8vw,40px); }
  .menu-eyebrow { font-size:10px; }
  .menu-subtitle { font-size:13px; }
  .menu-tip { font-size:11px; }
  .menu-buttons .btn { font-size:14px;padding:10px 6px;min-height:52px; }
  .menu-buttons .btn:first-child { font-size:18px; }
  .menu-pets { height:clamp(110px,24vh,176px); }
  .menu-pets .mp { width:17%; }
  .map-body { padding-top:14px; }
  .rooms-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:11px; }
  .room-card { min-height:184px;padding:12px 9px 13px; }
  .room-card::before { height:91px; }
  .room-card .rc-art { height:86px;width:94px; }
  .room-card b { font-size:17px; }
  .room-card small { font-size:11px; }
  .room-top { min-height:66px; }
  .pet-stats,.task-card { top:75px; }
  .stat-pill { font-size:11px;gap:4px;padding:5px 7px; }
  .stat-pill .track { width:42px;height:7px; }
  .task-card { max-width:51%;font-size:11px;padding:7px 9px; }
  .task-card h5 { font-size:12px;margin-bottom:3px; }
  .pet-slot { width:min(58vw,280px);bottom:8%; }
  .tray { min-height:103px;justify-content:flex-start; }
  .tool { width:73px;height:78px; }
  .scene .queue,.scene .shop-grid { top:72px; }
}
@media (max-height:690px) and (max-width:839px) {
  .menu-content { margin-top:15px;padding:12px 16px;gap:6px; }
  .menu-content .logo-badge { width:56px;height:56px; }
  .menu-content .logo h1 { font-size:clamp(27px,7vw,37px); }
  .menu-eyebrow,.menu-subtitle { display:none; }
  .menu-buttons { gap:8px; }
  .menu-buttons .btn { padding:9px 10px;font-size:14px; }
  .menu-buttons .btn:first-child { padding:10px;font-size:17px; }
  .menu-pets { height:clamp(80px,21vh,130px); }
  .avatar-preview { min-height:100px; }
  .avatar-preview svg { height:26vh; }
  .tray { min-height:89px;padding-top:8px;padding-bottom:calc(10px + var(--safe-b)); }
  .tool { height:68px; }
}
@media (max-height:520px) and (max-width:839px) {
  .menu-pets { display:none; }
  .menu-content { margin:auto; }
  .logo-badge { display:none; }
  .room-top { min-height:56px; }
  .pet-stats,.task-card { top:62px; }
}
@media (prefers-reduced-motion:reduce) {
  .screen.active,.pet-idle,.pet-eye,.pet-tail,.pet-ear,.pet-wing,.pet-head,
  .menu-pets .mp,.logo-badge,.badge,.tool.hi,.cloud,.fx,.bubble-fx {
    animation:none!important;
  }
  .btn,.room-card,.tool,.icon-btn,.sw,.hint-bubble,.toast { transition:none!important; }
}