/* vet game (site/vet.js): a farm vet clinic */
.vet { --m: min(60vh, 46vw); --t: min(17vh, 12vw);
  background: radial-gradient(circle at 50% 38%, #F4FFFB 0, #DDF4EC 55%, #C9EBDF 100%); }
@media (orientation: portrait) { .vet { --m: min(84vw, 50vh); --t: min(19vw, 10.5vh); } }
.vet-wall { position: absolute; inset: auto 0 0 0; height: 24%; pointer-events: none;
  background: linear-gradient(#F3DFC4, #EBCFAE); box-shadow: 0 -6px 0 #fff8; }
.vet-wall::before { content: ""; position: absolute; inset: -100vh 0 100% 0; opacity: .5;
  background: radial-gradient(circle, #fff 0 9px, transparent 10px) 0 0 / 90px 90px,
    radial-gradient(circle, #BDE7D8 0 6px, transparent 7px) 45px 45px / 90px 90px; }

/* today's cured patients */
.vet-stickers { position: absolute; z-index: 12; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: clamp(4px, 1vmin, 10px); background: rgba(255,255,255,.75); padding: 5px 12px 5px 8px;
  border-radius: 999px; max-width: calc(100vw - 150px); }
@media (orientation: portrait) { .vet-stickers { top: calc(max(10px, env(safe-area-inset-top)) + 66px); max-width: 94vw; } }
.vet-st-ic { width: clamp(28px, 6vmin, 46px); height: clamp(28px, 6vmin, 46px); }
.vet-chip { width: clamp(32px, 6.5vmin, 52px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #FFF4E0; position: relative; flex: none;
  box-shadow: 0 0 0 3px #FF9EBB; }
.vet-chip img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.7); transform-origin: 50% 22%; }
.vet-chip.empty { background: none; box-shadow: none; border: 3px dashed #F5B5C8; }
.vet-more { font-weight: 700; color: #E0688E; font-size: clamp(14px, 3vmin, 22px); }

/* play area: the patient + the tray */
.vet-play { position: absolute; z-index: 5; inset: 80px 3vw 66px; display: flex; align-items: center; justify-content: center; gap: 7vmin; }
@media (orientation: portrait) { .vet-play { flex-direction: column; top: 150px; bottom: 84px; gap: 6vmin; } }
.vet-patient { position: relative; width: var(--m); height: var(--m); flex: none; }
.vet-card { position: absolute; inset: 0; border-radius: 12%; background: #FFF4E0; overflow: hidden; touch-action: none; cursor: pointer;
  box-shadow: 0 0 0 1.2vmin #fff, 0 2vmin 0 1.2vmin rgba(80,140,120,.18); }
.vet-art, .vet-over { position: absolute; inset: 0; }
.vet-over { pointer-events: none; }
.vet-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .8s; }
.vet-art .emoji { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--m) * .6); }
.vet-art.sick { animation: vetsad 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
.vet-art.sick img { filter: saturate(.7) brightness(.97); }
@keyframes vetsad { 0%, 100% { transform: rotate(-1.5deg) } 50% { transform: rotate(1.5deg) translateY(1%) } }

/* speech bubble: what hurts */
.vet-say { position: absolute; z-index: 3; left: -4%; top: -7%; display: flex; align-items: center; gap: 6px;
  background: #fff; border-radius: 999px; padding: 6px 18px 6px 8px; font-weight: 700; font-size: clamp(18px, 4vmin, 34px);
  box-shadow: 0 .8vmin 0 rgba(0,0,0,.08); transform: scale(0); transform-origin: 20% 100%; transition: transform .35s cubic-bezier(.3,1.4,.5,1);
  white-space: nowrap; cursor: pointer; }
.vet-say::after { content: ""; position: absolute; left: 22%; bottom: -12px; border: 8px solid transparent; border-top: 12px solid #fff; border-bottom: 0; }
.vet-say.show { transform: scale(1); }
.vet-say img { width: clamp(34px, 7vmin, 58px); height: clamp(34px, 7vmin, 58px); }

/* the steps of this visit */
.vet-steps { position: absolute; z-index: 3; left: 50%; bottom: -5%; transform: translateX(-50%); display: flex; gap: 8px; }
.vet-dot { width: clamp(30px, 6.5vmin, 50px); aspect-ratio: 1; border-radius: 50%; background: #fff; display: grid; place-items: center; position: relative;
  box-shadow: 0 .5vmin 0 rgba(0,0,0,.08); opacity: .75; transition: transform .3s, opacity .3s; }
.vet-dot img { width: 78%; height: 78%; }
.vet-dot span { font-weight: 700; font-size: clamp(16px, 3.6vmin, 28px); color: #E0688E; }
.vet-dot.cur { opacity: 1; transform: scale(1.18); box-shadow: 0 0 0 3px #FF8F6B; }
.vet-dot.done { opacity: 1; }
.vet-dot.done::after { content: "✔"; position: absolute; right: -5px; bottom: -5px; width: 55%; aspect-ratio: 1; border-radius: 50%;
  background: #51CF66; color: #fff; font-size: clamp(10px, 2.2vmin, 16px); display: grid; place-items: center; }

/* the tray of tools */
.vet-tray { display: flex; flex-direction: column; flex-wrap: wrap; max-height: 100%; gap: 3.5vmin; align-items: center; justify-content: center;
  min-width: calc(var(--t) * 1.25); }
@media (orientation: portrait) { .vet-tray { flex-direction: row; max-width: 100%; min-width: 0; min-height: calc(var(--t) * 1.25); } }
.vet-tray:not(.choice) .vet-tool { --s: 1.25; }
.vet-tool { --s: 1; width: calc(var(--t) * var(--s)); height: calc(var(--t) * var(--s)); flex: none; border-radius: 26%;
  background: rgba(255,255,255,.92); display: grid; place-items: center; cursor: pointer; position: relative; touch-action: none;
  box-shadow: 0 1vmin 0 rgba(60,120,100,.15); transition: transform .35s cubic-bezier(.3,1.4,.5,1), opacity .3s; }
.vet-tool > img { width: 78%; height: 78%; object-fit: contain; }
.vet-tool.held { z-index: 30; transition: none; }
.vet-tool.dim { opacity: .45; }
.vet-tool.gone { transform: scale(0); opacity: 0; pointer-events: none; }
.vet-pop { animation: vetpop .45s cubic-bezier(.3,1.5,.5,1); }
@keyframes vetpop { from { transform: scale(.2); opacity: 0 } }
.vet-glow { animation: vetglow 1.4s ease 2; }
@keyframes vetglow { 50% { box-shadow: 0 0 0 1vmin rgba(255,224,138,.95), 0 0 5vmin 2vmin rgba(255,224,138,.85); transform: scale(1.08); } }
.vet-fly { position: fixed; pointer-events: none; z-index: 60; }
.vet-fly img { width: 100%; height: 100%; object-fit: contain; }
.vet-syrup { position: absolute; left: 18%; top: 4%; width: 34%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFC2DA, #F06AA0); }

/* hurt spots, tears and the things put on the animal (all positioned in % of the card) */
.vet-over > * { position: absolute; transform: translate(-50%, -50%); aspect-ratio: 1; transition: opacity .6s, transform .6s; }
.vet-over > .bye, .vet-spot.healed { opacity: 0; }
.vet-tear { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 40% 35%, #fff, #8FD3FF 45%, #4DB2F0);
  animation: vettear 2s ease-in infinite; opacity: 0; }
@keyframes vettear { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4) } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1) }
  100% { opacity: 0; transform: translate(-50%, 160%) scale(.9) } }
.vet-spot { border-radius: 50%; }
.vet-spot::before { content: ""; position: absolute; inset: -18%; border-radius: 50%; border: .5vmin dashed rgba(255,90,110,.75);
  animation: vetache 1.6s ease-in-out infinite; }
@keyframes vetache { 50% { transform: scale(1.15) rotate(20deg); opacity: .5 } }
.vet-spot.scrape { background: radial-gradient(circle, rgba(240,80,90,.85) 0 30%, rgba(255,140,150,.6) 55%, rgba(255,160,170,0) 70%); }
.vet-spot.scrape i { position: absolute; width: 26%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #8A5A33 0 45%, rgba(138,90,51,0) 72%);
  transform: translate(-50%, -50%); transition: opacity .3s; }
.vet-spot.clean::before { opacity: 0; animation: none; }
.vet-spot.clean i { opacity: 0; }
.vet-spot.bump { background: radial-gradient(circle at 45% 40%, #FFB3BF 0 22%, #F7798F 45%, rgba(247,121,143,0) 70%); }
.vet-spot.ache { background: radial-gradient(circle, rgba(255,100,120,.45) 0 35%, rgba(255,100,120,0) 70%); }
.vet-spot.flush { background: radial-gradient(circle, rgba(255,80,100,.55) 0 30%, rgba(255,80,100,0) 70%); }
.vet-spot.flush::before { display: none; }
.vet-spot.small { transform: translate(-50%, -50%) scale(.55); }
.vet-sweat { border-radius: 50% 0 50% 50%; transform: translate(-50%, -50%) rotate(-45deg); background: linear-gradient(135deg, #DFF4FF, #7CC8F5);
  animation: vetsweat 2.4s ease-in-out infinite; }
@keyframes vetsweat { 50% { margin-top: 2% } }
.vet-on img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 .4vmin .3vmin rgba(0,0,0,.2)); }
.vet-on.plaster { transform: translate(-50%, -50%) rotate(-12deg); animation: vetstick .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes vetstick { from { transform: translate(-50%, -50%) rotate(-12deg) scale(1.5) } }
.vet-on.ice { animation: vetwobble 1.2s ease-in-out infinite; }
@keyframes vetwobble { 50% { transform: translate(-50%, -50%) rotate(8deg) } }
.vet-on.thermo { transform: translate(-50%, -50%) rotate(35deg); }
.vet-on.dropper { animation: vetsqueeze .45s ease-in-out 3; }
@keyframes vetsqueeze { 50% { transform: translate(-50%, -50%) scale(.85, 1.1) } }
.vet-on.dropper.bye { transform: translate(-50%, -120%); }
.vet-drip { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #4DB2F0; opacity: 0; animation: vetdrip .5s ease-in 2 backwards; }
@keyframes vetdrip { from { opacity: 1; transform: translate(-50%, -50%) } to { opacity: 0; transform: translate(-50%, 220%) } }
.vet-beat { animation: vetbeat .9s ease-in-out infinite; }
@keyframes vetbeat { 15% { transform: translate(-50%, -50%) scale(1.3) } 30% { transform: translate(-50%, -50%) scale(1) }
  45% { transform: translate(-50%, -50%) scale(1.2) } }
.vet-cursor { z-index: 2; transition: left .12s, top .12s, opacity .3s; }
.vet-cursor img { width: 100%; height: 100%; filter: drop-shadow(0 .4vmin .3vmin rgba(0,0,0,.25)); }
.vet-cursor.vet-demo { animation: vetrub 1.2s ease-in-out 2; }
@keyframes vetrub { 25% { margin-left: 6% } 50% { margin-top: 4% } 75% { margin-left: -6% } }
.vet-sud { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 30%, #EAF7FF 60%, #BFE3FF);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.85); animation: vetpop .25s ease-out; }

/* thermometer readout */
.vet-temp { position: absolute; z-index: 2; right: 4%; top: 4%; display: flex; align-items: center; gap: 2px; background: #fff;
  border-radius: 999px; padding: 4px 14px 4px 4px; box-shadow: 0 .6vmin 0 rgba(0,0,0,.1); transition: background .4s, color .4s; }
.vet-temp img { width: clamp(28px, 6vmin, 48px); height: clamp(28px, 6vmin, 48px); }
.vet-temp b { font-size: clamp(18px, 4.5vmin, 36px); font-variant-numeric: tabular-nums; }
.vet-temp.hot { background: #FFD6D6; color: #D9364F; }
.vet-temp.ok { background: #D7F5DD; color: #2F9E44; }

.vet .tip { width: max-content; }

/* moves */
.vet-no { animation: vetno .5s ease; }
@keyframes vetno { 20%, 60% { transform: translateX(-3%) } 40%, 80% { transform: translateX(3%) } }
.vet-hug { animation: hug .9s ease; }
.vet-jump { animation: vetjump .9s ease; }
@keyframes vetjump { 25% { transform: translateY(-12%) scale(1.05) rotate(-3deg) } 50% { transform: translateY(0) scale(.97) }
  70% { transform: translateY(-5%) rotate(2deg) } }
.vet-card.cured { box-shadow: 0 0 0 1.2vmin #fff, 0 0 0 2.4vmin #FFC2D6, 0 2vmin 0 2.4vmin rgba(80,140,120,.18); }