:root {
  --wall: #DCEFE6; --floor: #F3EAD8; --gown: #F5C542; --nitrile: #6F7BD9; --ink: #1F2A44;
  --germ: #9B3FBF; --spore: #B6E04A; --warn: #D9483B; --paper: #FFFDF8; --mute: #6B7A90;
  --line: #B9C7C0; --ok: #2E9C6B;
  --font: "Fredoka", ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  --r: 14px; --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --stage-w: 100%;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); color: var(--ink); background: var(--wall); font-size: 16px; line-height: 1.35;
  -webkit-font-smoothing: antialiased; overflow: hidden; }
#app { container-type: inline-size; height: 100dvh; width: 100%; max-width: var(--stage-w); margin: 0 auto; position: relative; overflow: hidden;
  background: var(--wall); }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.05; }
button { font: inherit; color: inherit; }
dialog { font-family: var(--font); }

/* Screens */
.screen { position: absolute; inset: 0; display: none; opacity: 0; transition: opacity .3s; }
.screen.is-on { display: flex; flex-direction: column; opacity: 1; }
.card { margin: auto; width: min(92vw, 520px); background: var(--paper); border-radius: 22px; padding: 26px 24px;
  box-shadow: 0 18px 40px rgba(31,42,68,.14); text-align: center; }
.card-k { margin: 0 0 4px; color: var(--mute); }
.card h2 { font-size: 30px; margin-bottom: 14px; }
.muted { color: var(--mute); margin: 4px 0; }

/* Buttons */
.btn { border: 2px solid var(--ink); background: var(--paper); border-radius: 999px; padding: 11px 20px; min-height: 48px;
  cursor: pointer; font-weight: 600; font-size: 17px; transition: transform .12s, background .12s, box-shadow .12s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn-primary { background: var(--gown); }
.btn-icon { width: 48px; padding: 0; display: inline-grid; place-items: center; }
.btn-small { min-height: 40px; padding: 7px 14px; font-size: 15px; }
.btn-icon.btn-small { width: 40px; }
.btn-big { min-height: 64px; font-size: 19px; padding: 12px 22px; }
.btn[aria-pressed="true"] .wave { opacity: 0; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
:focus-visible { outline: 3px solid var(--nitrile); outline-offset: 3px; }

/* Start */
.start-wrap { margin: auto; display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: center; width: min(92vw, 820px); }
.start-mirror { background: #fff; border: 8px solid #CFE1D8; border-radius: 160px 160px 24px 24px; padding: 12px; height: 420px;
  box-shadow: inset 0 0 0 4px #E9F4EF, 0 16px 30px rgba(31,42,68,.12); }
.start-mirror svg { width: 100%; height: 100%; }
.start-copy h1 { font-size: clamp(40px, 7vw, 64px); }
.lede { font-size: 18px; max-width: 46ch; margin: 14px 0 8px; }
.best-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; color: var(--mute); font-size: 15px; }
.best-row span { background: #fff; border-radius: 999px; padding: 4px 12px; }
.start-copy .btn-row { justify-content: flex-start; }
@container (max-width: 640px) {
  .start-wrap { grid-template-columns: 1fr; text-align: center; padding: 16px 0; }
  .start-mirror { width: 180px; height: 270px; margin: 0 auto; }
  .start-copy .btn-row { justify-content: center; }
  .lede { font-size: 16px; }
}

/* Top bar */
.topbar { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 8px 14px; align-items: center;
  padding: calc(10px + var(--sat)) 16px 8px; background: var(--paper); border-bottom: 2px solid var(--line); font-weight: 600; }
.tb-patient { color: var(--mute); font-weight: 400; }
.tb-streak { display: flex; align-items: center; gap: 6px; }
.streak-x { background: var(--ink); color: #fff; border-radius: 8px; padding: 1px 8px; font-size: 14px; }
.streak-x.hot { background: var(--germ); position: relative; overflow: hidden; }
.streak-x.hot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.7) 50%, transparent 70%);
  animation: shimmer 1s ease-out 1; }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.tb-score { font-size: 22px; min-width: 60px; text-align: right; }
.timer { grid-column: 1 / -1; height: 6px; background: #E6EDE9; border-radius: 3px; overflow: hidden; }
.timer i { display: block; height: 100%; width: 100%; background: var(--ok); transform-origin: left; transition: background .3s; }
.timer i.low { background: var(--warn); }
.meter { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: 14px; }
.meter-track { height: 12px; background: #E6EDE9; border-radius: 6px; overflow: hidden; }
.meter-track i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--spore), var(--germ)); transition: width .3s; }
.meter.pulse .meter-track { animation: mpulse .8s infinite; }
@keyframes mpulse { 50% { transform: scaleY(1.25); } }

/* Stage */
.stage { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 130px minmax(0,1fr) 150px; grid-template-rows: minmax(0,1fr); gap: 12px; padding: 10px 16px calc(14px + var(--sab));
  overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; transition: background .6s; }
.stage.room { background: linear-gradient(180deg, transparent 60%, rgba(155,63,191,.05)); }
.wall { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, var(--wall) 0 62%, #CFE1D8 62% calc(62% + 6px), var(--floor) calc(62% + 6px)); }
.stage > * { position: relative; z-index: 1; }
.stage > .wall { position: absolute; z-index: 0; }
.door { grid-column: 1; grid-row: 1; align-self: end; margin-bottom: 20px; min-width: 0; max-height: 100%; }
.door svg { width: 100%; height: auto; max-height: 100%; display: block; }
#door-leaf { transform-origin: 12px 212px; transition: transform .6s cubic-bezier(.3,.9,.4,1); }
.door.open #door-leaf { transform: perspective(300px) rotateY(-32deg); }
.door.open #light-spill { opacity: .7; transition: opacity .6s; }
.door-sign { transition: opacity .3s; }
.door-sign.hidden { opacity: 0; }
.np-switch { position: absolute; top: 0; right: 0; left: 0; margin: 0 auto; width: max-content; display: flex; gap: 6px; align-items: center;
  border: 2px solid var(--ink); background: var(--paper); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; min-height: 32px; }
.np-lamp { width: 10px; height: 10px; border-radius: 50%; background: #c7ccd4; }
.np-switch[aria-pressed="true"] .np-lamp { background: var(--ok); box-shadow: 0 0 8px var(--ok); }

.mirror { grid-column: 2; grid-row: 1; position: relative; min-height: 0; min-width: 0; }
.mirror-frame { position: absolute; inset: 0 auto 0 auto; left: 50%; transform: translateX(-50%); width: min(100%, 300px); height: 100%;
  background: linear-gradient(180deg, #ffffff 0%, #F1F8F5 100%); border: 8px solid #CFE1D8; border-radius: 160px 160px 22px 22px;
  box-shadow: inset 0 0 0 4px #E9F4EF, 0 14px 28px rgba(31,42,68,.1); transition: box-shadow .2s, border-color .2s; }
.mirror.target .mirror-frame { border-color: var(--nitrile); box-shadow: inset 0 0 0 4px #E3E6FA, 0 0 0 6px rgba(111,123,217,.25); }
.figure-host { position: absolute; inset: 10px 0 6px; left: 50%; transform: translateX(-50%); width: min(100%, 300px); }
.figure-host svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: breathe 3.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes breathe { 50% { transform: scaleY(1.012) scaleX(.995); } }
.drop-hint { position: absolute; top: 44%; left: 50%; transform: translate(-50%,-50%); background: var(--nitrile); color: #fff; padding: 6px 14px;
  border-radius: 999px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .15s; }
.mirror.target .drop-hint { opacity: 1; }

/* PPE layers */
.gu-layer { opacity: 0; pointer-events: none; transform-box: fill-box; transform-origin: center; }
.gu-layer.on { opacity: 1; }
.gu-layer.ghost { opacity: .35; stroke-dasharray: 5 4; animation: ghostpulse 1.2s ease-in-out infinite; }
.gu-layer.ghost * { fill-opacity: .2; stroke: var(--nitrile); stroke-width: 2.5; }
@keyframes ghostpulse { 50% { opacity: .6; } }
#gu-stains circle, #gu-stains rect { transform-box: fill-box; }
.figure-host svg.hands-only #gu-body { }

/* Cart */
.cart, .worn { grid-column: 3; grid-row: 1; }
.cart { position: relative; align-self: stretch; }
.cart-rail { position: absolute; top: 8px; left: 10px; right: 10px; height: 8px; background: #8EA2B4; border-radius: 4px; }
.cart-rail::before, .cart-rail::after { content: ""; position: absolute; top: 8px; width: 6px; height: 50vh; max-height: 420px; background: #8EA2B4; }
.cart-rail::before { left: 4px; } .cart-rail::after { right: 4px; }
.cart-hooks { display: flex; flex-direction: column; gap: 8px; padding: 28px 12px 0; }
.hook { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 10px 4px 6px; border-radius: 12px; background: var(--paper);
  border: 2px solid var(--ink); cursor: grab; font-weight: 600; font-size: 14px; text-align: left; transform-origin: top center;
  transition: transform .15s, box-shadow .15s; position: relative; width: 100%; }
.hook:hover { transform: translateY(-2px); box-shadow: 0 4px 0 var(--ink); }
.hook.selected { background: #E3E6FA; border-color: var(--nitrile); box-shadow: 0 0 0 3px rgba(111,123,217,.35); }
.hook.glow { animation: glow 1.1s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 5px rgba(245,197,66,.55); background: #FFF5D1; } }
.hook.used { opacity: .35; cursor: default; }
.hook.used:hover { transform: none; box-shadow: none; }
.hook.sway { animation: sway .6s ease-out 1; }
@keyframes sway { 20% { transform: rotate(-5deg); } 50% { transform: rotate(4deg); } 80% { transform: rotate(-2deg); } }
.hook svg { width: 34px; height: 34px; flex: none; }
.hook kbd { position: absolute; right: 6px; top: -8px; background: var(--ink); color: #fff; font: 600 11px var(--font); border-radius: 6px; padding: 0 5px; }
.drag-ghost { position: fixed; z-index: 50; pointer-events: none; width: 56px; height: 56px; transform: translate(-50%,-50%) scale(1.15);
  filter: drop-shadow(0 8px 10px rgba(31,42,68,.3)); }
.drag-ghost svg { width: 100%; height: 100%; }

/* Worn panel (doffing) */
.worn { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.worn-title { font-weight: 600; color: var(--mute); font-size: 14px; }
.worn-list { display: flex; flex-direction: column; gap: 8px; }
.btn-line { border-style: dashed; border-color: var(--warn); color: var(--warn); margin-top: 4px; }
.bin { width: 60px; margin: auto auto 0; opacity: .8; }
.bin svg { width: 100%; }

/* Floor line, hint, rule card, enter */
.floor-line { position: absolute; left: 0; right: 0; top: 64%; height: 10px; background: repeating-linear-gradient(90deg, var(--warn) 0 24px, #fff 24px 36px);
  z-index: 0; transition: top .4s; }
.floor-line span { position: absolute; top: 12px; font-size: 12px; font-weight: 600; color: var(--warn); }
.floor-line span:first-child { left: 16px; } .floor-line span:last-child { right: 16px; }
.hint { position: absolute; left: 50%; bottom: calc(14px + var(--sab)); transform: translateX(-50%); background: var(--paper); border: 2px solid var(--ink);
  border-radius: 999px; padding: 6px 16px; font-weight: 600; font-size: 15px; white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis;
  z-index: 3; transition: opacity .2s; }
.hint:empty { opacity: 0; }
.rule-card { position: absolute; left: 50%; bottom: 18%; transform: translate(-50%, 140%); width: min(88%, 420px); background: var(--ink); color: #fff;
  border-radius: 16px; padding: 12px 18px; font-size: 16px; z-index: 4; transition: transform .35s cubic-bezier(.2,.9,.3,1.2), opacity .2s; pointer-events: none; opacity: 0; visibility: hidden; }
.rule-card.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.rule-card::before { content: ""; display: block; width: 36px; height: 6px; border-radius: 3px; background: var(--germ); margin-bottom: 8px; }
.btn-enter { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 4; box-shadow: 0 6px 0 var(--ink); }
.fx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.confetti { position: absolute; width: 10px; height: 14px; border-radius: 3px; }
.float-text { position: absolute; font-weight: 600; font-size: 22px; color: var(--ok); pointer-events: none; }
.float-text.bad { color: var(--germ); }

/* Overlays */
.overlay { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: rgba(220,239,230,.88); backdrop-filter: blur(4px); padding: 20px; text-align: center; }
.overlay[hidden] { display: none; }
.overlay h2 { font-size: clamp(26px, 5vw, 40px); }
.sp-title, .intro-k { margin: 0; color: var(--mute); font-weight: 600; }
.sp-ask { margin: 0; }
.sp-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sign-btn { border: 3px solid var(--ink); border-radius: 12px; background: #fff; padding: 0; width: 120px; min-height: 96px; cursor: pointer; overflow: hidden;
  font-weight: 600; transition: transform .15s; }
.sign-btn:hover { transform: translateY(-3px); }
.sign-btn b { display: block; color: #fff; padding: 8px; font-size: 18px; }
.sign-btn small { display: block; padding: 8px 6px; font-size: 12px; color: var(--mute); font-weight: 400; }
.intro-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 520px; }
.chip { background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 4px 12px; font-weight: 600; font-size: 14px; }
.chip.bad { border-color: var(--germ); color: var(--germ); text-decoration: line-through; }
.chip.ok { border-color: var(--ok); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.intro .chip { animation: chipin .4s both; }
.intro .chip:nth-child(2) { animation-delay: .15s; } .intro .chip:nth-child(3) { animation-delay: .3s; }
.intro .chip:nth-child(4) { animation-delay: .45s; } .intro .chip:nth-child(5) { animation-delay: .6s; }
@keyframes chipin { from { transform: translateY(12px) scale(.8); opacity: 0; } }

/* Debrief / level end */
.order-rows { display: grid; gap: 10px; text-align: left; margin: 8px 0 14px; }
.order-row { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 8px; }
.order-label { font-weight: 600; color: var(--mute); }
.why { font-size: 17px; margin: 0 0 6px; }
.mnemonic { color: var(--mute); font-size: 14px; margin: 0 0 16px; }
.stars { display: flex; justify-content: center; gap: 10px; margin: 6px 0 10px; }
.stars i { width: 44px; height: 44px; background: #E6EDE9; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); transform: scale(.6); opacity: .5; }
.stars i.lit { background: var(--gown); transform: scale(1); opacity: 1; }
.score-big { font-size: 56px; font-weight: 600; line-height: 1; }

dialog { border: 3px solid var(--ink); border-radius: 20px; padding: 24px; width: min(92vw, 480px); background: var(--paper); color: var(--ink); }
dialog::backdrop { background: rgba(31,42,68,.4); }
dialog h3 { font-size: 24px; margin-bottom: 10px; }
dialog ol { padding-left: 20px; } dialog li { margin-bottom: 8px; }

/* Narrow */
@container (max-width: 560px) {
  .stage { grid-template-columns: 90px 1fr; grid-template-rows: 1fr auto; gap: 8px; padding: 8px 12px calc(10px + var(--sab)); }
  .door { margin-bottom: 0; }
  .np-switch { font-size: 11px; padding: 3px 8px; }
  .cart, .worn { grid-column: 1 / -1; grid-row: 2; }
  .cart-rail { display: none; }
  .cart-hooks { flex-direction: row; flex-wrap: wrap; padding: 0; gap: 6px; }
  .hook { width: auto; flex: 1 1 100px; font-size: 13px; min-height: 48px; }
  .worn { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .worn-list { flex-direction: row; flex-wrap: wrap; }
  .bin { display: none; }
  .mirror-frame { width: 100%; }
  .floor-line { top: 54%; }
  .hint { bottom: auto; top: 8px; }
  .rule-card { bottom: 36%; }
  .topbar { gap: 6px 10px; padding-left: 12px; padding-right: 12px; }
  .tb-level { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .1s !important; }
  .figure-host svg { animation: none; }
  .hook.glow { box-shadow: 0 0 0 4px rgba(245,197,66,.6); }
}