/* ---------- Little Doctor ---------- */
.dr { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
.dr-scene { position: absolute; inset: 0; background-size: cover; background-position: center bottom; }
.dr-stage { position: absolute; inset: 0; }
.dr-fx { position: absolute; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }
.dr-bed { position: absolute; left: 50%; bottom: clamp(120px, 22vh, 190px); width: clamp(300px, 52vh, 520px); transform: translateX(-50%); pointer-events: none; }
.dr-patient { position: absolute; left: 50%; bottom: clamp(150px, 27vh, 240px); width: clamp(200px, 42vh, 380px); aspect-ratio: 1; transform: translateX(-50%); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .4s; z-index: 5; }
.dr-patient.dr-arrive { transform: translateX(-50%) translateY(40px) scale(.6); opacity: 0; transition: none; }
.dr-patient.dr-leave { transform: translateX(120vw); opacity: 0; transition: transform 1.1s ease-in, opacity 1s; }
.dr-patient.dr-over { transform: translateX(-50%) scale(1.05); }
.dr-patient.dr-better .dr-pt { animation: dr-bounce .6s ease-in-out infinite alternate; }
.dr-patient.dr-shake { animation: dr-shake .4s ease; }
.dr-pt { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .18)); pointer-events: none; }
.dr-xray { position: absolute; inset: 8% 15%; width: 70%; height: 84%; object-fit: contain; z-index: 3; animation: dr-pop .4s cubic-bezier(.34, 1.56, .64, 1); pointer-events: none; }
.dr-spots { position: absolute; inset: 0; pointer-events: none; }
.dr-ring { position: absolute; width: 22%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); border: 5px solid #fff; box-shadow: 0 0 0 5px rgba(255, 90, 120, .75), 0 0 24px rgba(255, 90, 120, .8); animation: dr-pulse 1s ease-in-out infinite alternate; }
.dr-ring.dr-listen { box-shadow: 0 0 0 5px rgba(90, 180, 255, .75), 0 0 24px rgba(90, 180, 255, .8); width: 30%; }
@keyframes dr-pulse { from { scale: .9; } to { scale: 1.12; } }
@keyframes dr-bounce { from { translate: 0 0; } to { translate: 0 -14px; } }
@keyframes dr-shake { 0%, 100% { translate: 0 0; } 25% { translate: -12px 0; } 75% { translate: 12px 0; } }
@keyframes dr-pop { from { transform: scale(0); } }
.dr-bubbles { position: absolute; left: 50%; top: clamp(90px, 14vh, 130px); transform: translateX(-50%); display: flex; gap: 14px; z-index: 6; }
.dr-bubble { position: relative; width: clamp(80px, 15vh, 130px); aspect-ratio: 1; border-radius: 50% 50% 50% 12%; background: #fff; border: 5px solid #fff; box-shadow: var(--shadow); display: grid; place-items: center; animation: dr-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
.dr-bubble > img:first-child { width: 78%; height: 78%; object-fit: contain; }
.dr-bubble .dr-need { position: absolute; right: -12px; bottom: -12px; width: 52%; height: 52%; object-fit: contain; background: #fff; border-radius: 50%; border: 3px solid var(--yellow); box-shadow: 0 3px 0 rgba(0, 0, 0, .12); padding: 4px; animation: dr-pulse 1s ease-in-out infinite alternate; }
.dr-bubble.dr-done { opacity: .35; filter: grayscale(1); animation: none; }
.dr-bubble.dr-q { animation: dr-pop .45s cubic-bezier(.34, 1.56, .64, 1), dr-bounce .7s ease-in-out .5s infinite alternate; }
.dr-top { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; z-index: 15; }
.dr-score { display: flex; align-items: center; gap: 8px; padding: 6px 20px 6px 12px; border-radius: 40px; background: #fff; box-shadow: var(--shadow); font-size: 42px; line-height: 1; color: var(--ink); }
.dr-score .ico { width: 46px; height: 46px; }
.dr-stars.bump { display: inline-block; animation: bump .35s cubic-bezier(.3, 1.6, .5, 1); }
.dr-next { width: 60px; height: 60px; border-radius: 50%; background: conic-gradient(var(--pink) calc(var(--p, 0) * 360deg), #eee4f2 0); display: grid; place-items: center; position: relative; box-shadow: var(--shadow); }
.dr-next::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.dr-next img { position: relative; width: 66%; height: 66%; object-fit: cover; border-radius: 50%; filter: grayscale(.7); opacity: .85; }
.dr-tray { position: absolute; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 8px; padding: 10px 14px; border-radius: 40px; background: rgba(255, 255, 255, .85); box-shadow: var(--shadow); z-index: 12; max-width: calc(100vw - 24px); touch-action: none; }
.dr-tool { width: clamp(54px, 9vh, 82px); aspect-ratio: 1; border-radius: 22px; background: linear-gradient(180deg, #fff, #f6f0ff); border: 4px solid #ece4f6; display: grid; place-items: center; transition: transform .12s; flex: 0 0 auto; }
.dr-tool img { width: 84%; height: 84%; object-fit: contain; pointer-events: none; }
.dr-tool:active, .dr-tool.dr-lifted { transform: scale(.9); opacity: .6; }
.dr-tool.dr-locked img { filter: grayscale(1); opacity: .35; }
.dr-tool.dr-locked { position: relative; }
.dr-tool.dr-locked::after { content: ""; position: absolute; inset: 22%; background: url(../assets/img/ui_lock.png) center / contain no-repeat; }
.dr-hand { position: absolute; z-index: 30; width: clamp(90px, 16vh, 150px); pointer-events: none; transform: translate(-50%, -60%) rotate(-12deg); filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .28)); }
.dr-sticker { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: clamp(110px, 20vh, 170px); width: clamp(110px, 22vh, 190px); z-index: 14; animation: pulse-plain 1.1s ease-in-out infinite; }
.dr-sticker img { width: 100%; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .22)); }
.dr-spark { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, #fff, var(--pink)); transform: translate(-50%, -50%); animation: dr-spark .7s ease-out forwards; }
@keyframes dr-spark { to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0); opacity: 0; } }
.dr-heart { position: absolute; width: 50px; transform: translate(-50%, -50%); animation: dr-heart 1.5s ease-out forwards; }
.dr-heart .ico { width: 100%; }
@keyframes dr-heart { to { transform: translate(-50%, -260%) scale(1.4); opacity: 0; } }
.dr-starfly { position: absolute; width: 44px; transform: translate(-50%, -50%); animation: dr-tostar .85s ease-in forwards; }
.dr-starfly .ico { width: 100%; }
@keyframes dr-tostar { to { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.5); } }
.dr-unlock { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; pointer-events: none; background: rgba(255, 255, 255, .22); }
.dr-unlock-card { width: clamp(200px, 44vh, 320px); aspect-ratio: 1; border-radius: 40px; background: #fff; border: 8px solid var(--yellow); box-shadow: var(--shadow); display: grid; place-items: center; animation: dr-card .6s cubic-bezier(.34, 1.56, .64, 1); }
.dr-unlock-card img { width: 80%; height: 80%; object-fit: contain; }
.dr-unlock.dr-unlock-scene .dr-unlock-card { width: min(60vw, 520px); aspect-ratio: 16 / 10; }
.dr-unlock.dr-unlock-scene .dr-unlock-card img { width: 92%; height: 88%; object-fit: cover; border-radius: 22px; }
@keyframes dr-card { from { transform: scale(0) rotate(-12deg); } }
.dr-overlay { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(120, 90, 150, .55); animation: fadein .18s ease-out; }
.dr-panel { width: min(92%, 980px); max-height: 86%; overflow-y: auto; border-radius: 30px; background: #fff; box-shadow: var(--shadow); padding: 18px; display: flex; flex-direction: column; gap: 18px; animation: slidein .22s ease-out; -webkit-overflow-scrolling: touch; }
.dr-close { position: absolute; right: max(16px, env(safe-area-inset-right)); top: max(12px, env(safe-area-inset-top)); }
.dr-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.dr-patients { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; padding-top: 18px; border-top: 4px dashed #f1e9f7; }
.dr-room-card, .dr-pt-card { position: relative; border-radius: 20px; overflow: hidden; border: 5px solid #ece4f6; background: linear-gradient(180deg, #fff, #f6f0ff); box-shadow: 0 6px 0 rgba(120, 70, 140, .14); transition: transform .12s; display: grid; place-items: center; }
.dr-room-card { aspect-ratio: 16 / 9; }
.dr-pt-card { aspect-ratio: 1; }
.dr-room-card:active, .dr-pt-card:active { transform: scale(.94); }
.dr-room-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dr-pt-card img { width: 82%; height: 82%; object-fit: contain; }
.dr-room-card.active, .dr-pt-card.active { border-color: var(--yellow); box-shadow: 0 6px 0 #f4c20d; }
.dr-locked img { filter: grayscale(1); opacity: .4; }
.dr-room-card.dr-locked::after, .dr-pt-card.dr-locked::after { content: ""; position: absolute; left: 50%; top: 40%; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%); background: url(../assets/img/ui_lock.png) center / contain no-repeat; }
.dr-price { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 2px 12px 2px 6px; border-radius: 20px; background: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .12); font-size: 22px; color: var(--ink); }
.dr-price .ico { width: 28px; height: 28px; }
@media (orientation: portrait) {
  .dr-tray { flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 24px); }
  .dr-tool { width: clamp(50px, 7vh, 72px); }
  .dr-patient { bottom: clamp(220px, 34vh, 340px); width: clamp(180px, 34vh, 320px); }
  .dr-bed { bottom: clamp(190px, 30vh, 300px); width: clamp(260px, 44vh, 460px); }
  .dr-sticker { bottom: clamp(200px, 32vh, 330px); }
}