.clinic-mode{overflow:hidden}
.clinic{--rose:#edc5d2;--soft:#c9b8c3;position:fixed;inset:0;z-index:3;height:100svh;overflow:hidden;color:#f4eeec}
.clinic-shell{height:100%;width:100%;max-width:460px;margin:0 auto;padding:max(20px,env(safe-area-inset-top)) 22px max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column}
.clinic-header{position:relative;flex-shrink:0;text-align:center}
.clinic-back{position:absolute;top:0;left:-7px;display:grid;place-items:center;width:44px;height:44px;padding:12px;color:#c7b2bf;background:none;border:0;border-radius:50%;z-index:2}
.clinic-back svg{width:21px;height:15px;transform:rotate(180deg)}
.clinic-back:hover{background:#edc5d20d}
.clinic button:focus-visible{outline:1px solid var(--rose);outline-offset:5px}
.clinic-title{margin:0;outline:none;font:italic 400 44px/1 Letter,Georgia,serif;letter-spacing:-.8px;color:var(--rose);pointer-events:none}
.clinic-title span{display:block}
.clinic-title em{display:block;margin-top:5px;font-size:27px;line-height:1.2;letter-spacing:-.3px;color:#eadde4}
.clinic[data-phase="intro"] .clinic-back,.clinic[data-phase="title-rising"] .clinic-back{opacity:0;pointer-events:none}
.clinic-progress{display:flex;justify-content:center;gap:10px;margin:17px 0 0;min-height:9px}
.clinic-progress span{display:block;width:7px;height:7px;background:#edc5d22b;clip-path:polygon(50% 0,61% 35%,100% 50%,61% 65%,50% 100%,39% 65%,0 50%,39% 35%);transition:background .5s}
.clinic-progress span.current{background:#edc5d27d}
.clinic-progress span.done{background:var(--rose)}
.clinic-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.clinic-patient{width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;padding-top:9px}
.patient-number{margin:0 0 6px;color:#a693a1;font-size:9px;line-height:1.4;letter-spacing:2px;text-transform:uppercase}
.patient-name{font:400 32px/1.1 Letter,Georgia,serif;letter-spacing:-.6px;color:#edc5d2;margin:0 0 11px;outline:none}
.patient-speech{position:relative;margin:0;min-height:39px;max-width:280px;padding:10px 17px;border:1px solid #edc5d225;border-radius:22px;background:#edc5d209;color:#eadce4;font-size:13px;line-height:1.4}
.patient-figure{position:relative;width:min(82vw,38svh,310px);aspect-ratio:1;margin:0 0 -8px;isolation:isolate}
.patient-figure::before{content:"";position:absolute;inset:7% -3%;border-radius:50%;background:radial-gradient(ellipse,#edc5d211,transparent 65%);z-index:-1;pointer-events:none}
.patient-target{position:relative;width:100%;height:100%;padding:0;border:0;border-radius:36%;background:none;color:inherit;cursor:default;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.patient-target:disabled{opacity:1}
.patient-motion{position:absolute;inset:0;animation:patient-float 5.8s ease-in-out infinite;pointer-events:none}
.patient-sprite{position:absolute;inset:0;background-image:var(--atlas);background-repeat:no-repeat;background-size:300% auto;background-position:0% 50%;transition:opacity .6s ease;filter:drop-shadow(0 0 16px #e9bbc50d);pointer-events:none}
.patient-sprite.well{background-position:50% 50%;opacity:0}
.clinic-patient[data-status="healed"] .patient-sprite.ill{opacity:0}
.clinic-patient[data-status="healed"] .patient-sprite.well{opacity:1}
.clinic-patient[data-status="healed"] .patient-motion{animation:patient-happy 1.2s ease-in-out}
.patient-target::after{content:"";position:absolute;inset:10%;border:1px dashed #edc5d245;border-radius:50%;opacity:0;transform:scale(.95);transition:opacity .25s,transform .25s;pointer-events:none}
.clinic-patient.tool-selected .patient-target{cursor:pointer}
.clinic-patient.tool-selected .patient-target::after{opacity:1;transform:scale(1)}
.clinic[data-patient="saturn"] .patient-figure{width:min(82vw,35svh,300px)}
.clinic[data-patient="saturn"] .patient-target{touch-action:none}
.clinic[data-patient="saturn"] .patient-target::after{display:none}
.ointment-patch{position:absolute;left:11%;top:12%;width:78%;height:76%;border:1px dashed #f4d5df66;border-radius:50%;background:#fff4e20a;opacity:.45;overflow:hidden;pointer-events:none;transition:opacity .4s,box-shadow .4s}
.tool-selected .ointment-patch{opacity:1;box-shadow:0 0 20px #edc5d21c,inset 0 0 16px #fff1dc0d}
.clinic[data-patient="saturn"] .tool-selected .patient-motion{animation-play-state:paused}
.clinic-patient[data-status="healed"] .ointment-patch{opacity:0}
.cream-dab{position:absolute;width:17px;height:9px;margin:-4px 0 0 -8px;border-radius:50%;background:#fff8e7a1;filter:blur(1.2px);pointer-events:none}
.ointment-status{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:22px;margin:1px 0 3px}
.ointment-progress{width:106px;height:3px;border-radius:4px;background:#edc5d222;overflow:hidden}
.ointment-progress span{display:block;width:100%;height:100%;border-radius:4px;background:#edc5d2;transform:scaleX(0);transform-origin:left center}
.ointment-time{color:#cfb9c7;font-size:10px;font-variant-numeric:tabular-nums;min-width:53px;text-align:left}
.tool-dock{display:grid;place-items:center;width:100%;height:96px;flex-shrink:0;margin:-8px 0 0}
.treatment{position:relative;width:108px;height:94px;padding:0;border:1px solid transparent;border-radius:24px;background:transparent;touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;z-index:4;transition:border-color .25s,background .25s}
.treatment::before{content:"";position:absolute;bottom:10px;left:16%;right:16%;height:10px;border-radius:50%;background:#edc5d219;filter:blur(7px);pointer-events:none}
.treatment:hover,.treatment[aria-pressed="true"]{border-color:#edc5d238;background:#edc5d206}
.treatment.dragging{cursor:grabbing;border-color:transparent;background:transparent;transition:none}
.treatment:disabled{cursor:default;opacity:0;pointer-events:none}
.tool-art{position:absolute;inset:0;background-image:var(--atlas);background-repeat:no-repeat;background-size:450% auto;background-position:92.857143% 50%;pointer-events:none;filter:drop-shadow(0 5px 10px #0005)}
.clinic-instruction{min-height:20px;margin:4px 0 0;color:#cdbbc6;font-size:12px;line-height:1.6;letter-spacing:.1px;max-width:320px}
.clinic-patient.tool-selected .clinic-instruction{color:var(--rose)}
.treatment-ghost{position:fixed;z-index:20;pointer-events:none;padding:0;border:0;background:transparent}
.clinic-spark{position:absolute;left:50%;top:50%;width:7px;height:7px;background:#f7e6ed;clip-path:polygon(50% 0,60% 38%,100% 50%,60% 62%,50% 100%,40% 62%,0 50%,40% 38%);pointer-events:none;z-index:5}
.clinic-finish{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;align-self:stretch}
.finish-friends{display:flex;justify-content:center;width:100%;max-width:350px;margin:0 0 28px}
.finish-friend{position:relative;flex:1;max-width:88px;aspect-ratio:1;animation:patient-float 6s ease-in-out infinite}
.finish-friend:nth-child(2){animation-delay:-1.4s}
.finish-friend:nth-child(3){animation-delay:-3s}
.finish-friend:nth-child(4){animation-delay:-4.1s}
.finish-friend:nth-child(5){animation-delay:-5.2s}
.finish-friend .patient-sprite{opacity:1;background-position:50% 50%}
.finish-title{font:italic 400 clamp(46px,13vw,58px)/1.1 Letter,Georgia,serif;color:var(--rose);letter-spacing:-1px;margin:0 0 40px;outline:none}
.finish-title span{display:block;margin-top:14px;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-style:normal;font-size:36px;letter-spacing:0}
.clinic-replay{display:inline-flex;align-items:center;justify-content:center;gap:13px;min-height:44px;padding:9px 19px;border:1px solid #edc5d233;border-radius:25px;background:#edc5d208;color:#c8b0be;font-size:12px}
.clinic-replay svg{width:17px;height:17px}
.clinic-loading{color:#bdaab7;font-size:12px;line-height:1.5;text-align:center}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes patient-float{0%,100%{transform:translateY(3px) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@keyframes patient-happy{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-9px) rotate(-3deg)}65%{transform:translateY(-4px) rotate(3deg)}}
@media(max-height:700px){.clinic-shell{padding-top:max(14px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}.clinic-title{font-size:37px}.clinic-title em{font-size:24px;margin-top:3px}.clinic-progress{margin-top:12px}.patient-name{font-size:29px;margin-bottom:8px}.patient-speech{font-size:12px;min-height:33px;padding:8px 14px}.patient-figure{width:min(78vw,34svh,260px)}.tool-dock{height:84px}.treatment{width:96px;height:84px}.clinic-instruction{font-size:12px;margin-top:2px}}
@media(max-height:610px){.clinic-shell{padding:11px 18px 9px}.clinic-title{font-size:32px}.clinic-title em{font-size:21px}.clinic-progress{margin-top:9px}.clinic-patient{padding-top:5px}.patient-number{margin-bottom:4px}.patient-name{font-size:27px;margin-bottom:6px}.patient-speech{padding:7px 12px;min-height:30px}.patient-figure{width:min(74vw,31svh,215px);margin-bottom:-7px}.tool-dock{height:76px;margin-top:-10px}.treatment{width:90px;height:76px}.clinic-instruction{font-size:11px;min-height:17px}.finish-friends{margin-bottom:20px}.finish-title{font-size:46px;margin-bottom:28px}}
@media(max-height:610px){.clinic[data-patient="saturn"] .patient-figure{width:min(74vw,28svh,195px)}.ointment-status{height:18px;margin:0}.clinic[data-patient="saturn"] .clinic-instruction{max-width:245px;line-height:1.5}}
@media(prefers-reduced-motion:reduce){.clinic *,.clinic *::before,.clinic *::after{animation:none!important;transition:none!important}}
