/* ============================================================
   Hogspital Ward — the game
   ============================================================ */

.game-shell {
  background: var(--cream-2);
  border-block: 3px solid var(--ink);
  padding: clamp(1.2rem, 3vw, 2.5rem) 0;
}

.game {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 260px 1fr;
  align-items: start;
}
.game__side { display: grid; gap: 1.2rem; }

/* On a phone the patient comes first — the scoreboard and help can wait. */
@media (max-width: 900px) {
  .game { grid-template-columns: 1fr; }
  .game__side { order: 2; }
  .ward { order: 1; }
}

.panel-box {
  background: var(--white);
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.1rem 1.2rem;
}
.panel-box > h2 {
  font-size: 1.15rem; margin: 0 0 .8rem;
  display: flex; align-items: center; gap: .45rem;
}

/* ---------- scoreboard ---------- */
.scoreboard { display: grid; gap: .6rem; }
.score-row {
  display: flex; justify-content: space-between; align-items: baseline;
  background: var(--cream-3); border: 2px solid var(--ink); border-radius: 12px;
  padding: .45rem .8rem;
}
.score-row b { font-family: var(--font-display); font-size: 1.4rem; color: var(--rust); }

/* ---------- waiting room ---------- */
.queue { display: flex; gap: .6rem; flex-wrap: wrap; }
.queue__hog {
  flex: 1 1 70px; min-width: 70px;
  background: var(--cream-3); border: 3px solid var(--ink); border-radius: 14px;
  padding: .5rem .35rem; cursor: pointer; text-align: center;
  font-family: var(--font-display); font-weight: 600; font-size: .85rem;
  transition: transform .12s ease;
}
.queue__hog:hover { transform: translateY(-3px); background: var(--amber-soft); }
.queue__hog img { width: 100%; max-width: 56px; margin: 0 auto .2rem; }
.queue__empty { color: var(--ink-soft); font-size: .92rem; margin: 0; }

/* ---------- treatment table ---------- */
.ward { display: grid; gap: 1.2rem; }

.patient {
  display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 220px) 1fr;
  align-items: start;
}
@media (max-width: 640px) { .patient { grid-template-columns: 1fr; } }

.patient__stage {
  background: radial-gradient(circle at 50% 78%, var(--amber-soft) 0%, var(--cream-3) 60%, var(--cream-2) 100%);
  border: 3px solid var(--ink); border-radius: var(--radius-lg);
  padding: 1rem; text-align: center; position: relative; overflow: hidden;
}
.patient__stage img { width: 100%; max-width: 180px; margin: 0 auto; transition: transform .2s ease; }
.patient__stage.is-wobbling img { animation: wobble .5s ease; }
.patient__stage.is-cheering img { animation: cheer .6s ease; }
@keyframes wobble {
  0%,100% { transform: rotate(0) }
  20% { transform: rotate(-7deg) }
  45% { transform: rotate(6deg) }
  70% { transform: rotate(-4deg) }
}
@keyframes cheer {
  0%,100% { transform: translateY(0) scale(1) }
  35% { transform: translateY(-16px) scale(1.06) }
  70% { transform: translateY(-4px) scale(1.02) }
}

.patient__name { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: var(--moss); margin: 0 0 .1em; }
.patient__story { color: var(--ink-soft); font-size: .98rem; margin: 0 0 1rem; font-style: italic; }

/* weight bar */
.weigh { margin-bottom: 1rem; }
.weigh__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .3rem; font-weight: 700; }
.weigh__num { font-family: var(--font-display); font-size: 1.35rem; color: var(--rust); }
.weigh__bar { height: 26px; background: var(--cream-3); border: 3px solid var(--ink); border-radius: 999px; overflow: hidden; position: relative; }
.weigh__fill {
  height: 100%; width: 0;
  background: repeating-linear-gradient(45deg, var(--leaf), var(--leaf) 12px, #9cbe7e 12px, #9cbe7e 24px);
  transition: width .45s cubic-bezier(.3,1.3,.5,1);
}
.weigh__target { font-size: .85rem; color: var(--ink-soft); margin-top: .25rem; }

/* need chips */
.needs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; padding: 0; list-style: none; }
.need {
  display: inline-flex; align-items: center; gap: .35rem;
  background: #fbe6de; border: 3px solid var(--ink); border-radius: 999px;
  padding: .3em .9em; font-weight: 700; font-size: .95rem;
  animation: pop .25s ease;
}
.need.is-done { background: #e9f2e0; text-decoration: line-through; opacity: .6; }
@keyframes pop { from { transform: scale(.7); opacity: 0 } to { transform: scale(1); opacity: 1 } }

.needs-clear { color: var(--moss); font-weight: 800; }

/* ---------- tray ---------- */
.tray { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.tool {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  background: var(--white); border: 3px solid var(--ink); border-radius: var(--radius);
  padding: .7rem .4rem; cursor: pointer; text-align: center;
  font-family: var(--font-body); font-weight: 700; font-size: .82rem; line-height: 1.2;
  color: var(--ink); box-shadow: 0 4px 0 var(--ink);
  transition: transform .1s ease, box-shadow .1s ease, background .1s ease;
}
.tool:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 7px 0 var(--ink); background: var(--amber-soft); }
.tool:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
.tool:disabled { opacity: .45; cursor: not-allowed; box-shadow: 0 4px 0 var(--ink); }
.tool__icon { font-size: 1.9rem; line-height: 1; }
.tool--trap { background: #fdf1ee; }

/* ---------- nurse's note ---------- */
.note {
  background: var(--cream-3); border: 3px solid var(--ink); border-left-width: 12px;
  border-radius: var(--radius); padding: .9rem 1.1rem; min-height: 5.5rem;
}
.note b { display: block; font-family: var(--font-display); color: var(--moss); margin-bottom: .15rem; }
.note.is-good { background: #e9f2e0; border-left-color: var(--leaf); }
.note.is-oops { background: #fbe6de; border-left-color: var(--rust); }
.note p { margin: 0; }

/* ---------- release button ---------- */
.release-bar { margin-top: 1rem; display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }
.release-hint { color: var(--ink-soft); font-size: .95rem; margin: 0; }

/* ---------- celebration ---------- */
.leaf {
  position: absolute; top: -30px; font-size: 1.4rem; pointer-events: none;
  animation: fall 2.2s linear forwards;
}
@keyframes fall {
  to { transform: translateY(320px) rotate(420deg); opacity: 0; }
}

/* ---------- released log ---------- */
.released { display: flex; gap: .4rem; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; }
.released li {
  background: #e9f2e0; border: 2px solid var(--ink); border-radius: 999px;
  padding: .2em .7em; font-size: .85rem; font-weight: 700;
}

/* ---------- intro / how to play ---------- */
.how { display: grid; gap: .6rem; padding-left: 1.1rem; margin: 0; }
.how li { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .leaf { display: none; }
}