/* Ocarina of Time 3D Heart Piece checklist (heart-pieces.js): the 20-heart life meter with quarter hearts, the
   eight boss title cards as Heart Container toggles, then the 36-row checklist. Chips/none come from items.css. */
.oot-hp { padding: 16px; }
.oot-hp-meter { display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px var(--oot-line); }
.oot-hp-hearts { display: grid; grid-template-columns: repeat(10, 30px); gap: 4px 6px; }
.oot-hp-h svg { display: block; width: 30px; height: 26px; overflow: visible; }
.oot-hp-h .hb { fill: rgba(0, 0, 0, .45); }
.oot-hp-h .q { fill: transparent; transition: fill .25s; }
.oot-hp-h .ho { fill: none; stroke: #f6f0e4; stroke-width: 1.6; stroke-linejoin: round; opacity: .55; }
.oot-hp-h.is-full .q, .oot-hp-h[data-q="1"] .q1, .oot-hp-h[data-q="2"] .q1, .oot-hp-h[data-q="2"] .q2,
.oot-hp-h[data-q="3"] .q1, .oot-hp-h[data-q="3"] .q2, .oot-hp-h[data-q="3"] .q3 { fill: var(--oot-heart); }
.oot-hp-h.is-full .ho, .oot-hp-h[data-q] .ho { opacity: 1; }
.oot-hp-h.is-new svg { animation: oot-hp-pop .5s ease-out; }
@keyframes oot-hp-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .oot-hp-h.is-new svg { animation: none; } }
.oot-hp-sum { margin: 0; font-weight: 700; color: var(--oot-ink-dim); }
.oot-hp-sum b { color: var(--oot-gold-soft); font-size: 1.15em; }
.oot-hp-bosses { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.oot-hp-bosses button { display: grid; gap: 3px; justify-items: center; padding: 5px 4px; border-radius: 10px; border: 1.5px solid var(--oot-rim-dim); background: #0b1430; color: var(--oot-ink-dim); font: 700 11px/1.15 var(--oot-sans); cursor: pointer; filter: grayscale(.85) brightness(.75); transition: filter .15s, border-color .15s; }
.oot-hp-bosses button img { width: 100%; max-width: 64px; height: auto; border-radius: 4px; }
.oot-hp-bosses button[aria-pressed=true] { filter: none; border-color: var(--oot-gold-deep); color: var(--oot-gold-soft); }
.oot-hp-bosses button:disabled { cursor: default; }
.oot-hp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 10px; }
.oot-hp-tools[hidden] { display: none; }
.oot-hp-area { padding: 6px 10px; border-radius: 10px; border: 1.5px solid var(--oot-rim-dim); background: #0b1430; color: var(--oot-ink); font: 700 13.5px/1.2 var(--oot-sans); }
.oot-hp-hide { display: inline-flex; align-items: center; gap: 6px; color: var(--oot-ink-dim); font: 700 13.5px/1.2 var(--oot-sans); }
.oot-hp-reset { margin-left: auto; padding: 6px 13px; border-radius: 999px; border: 1.5px solid var(--oot-rim-dim); background: none; color: var(--oot-ink-faint); font: 700 13px/1.2 var(--oot-sans); cursor: pointer; }
.oot-hp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.oot-hp-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: rgba(0, 0, 0, .18); box-shadow: inset 0 0 0 1px var(--oot-line); }
.oot-hp-list li[hidden] { display: none; }
.oot-hp-list li.is-done { opacity: .55; }
.oot-hp-list li.is-done .oot-hp-name b { text-decoration: line-through; text-decoration-color: var(--oot-heart); }
.oot-hp-list label { display: flex; align-items: center; gap: 9px; min-width: 0; cursor: pointer; }
.oot-hp-list input { width: 20px; height: 20px; flex: none; accent-color: var(--oot-heart); }
.oot-hp-name { display: grid; min-width: 0; }
.oot-hp-name b { font-size: 14.5px; line-height: 1.25; color: var(--oot-ink); overflow-wrap: anywhere; }
.oot-hp-name small { font-size: 12px; color: var(--oot-ink-faint); }
.oot-hp-age { padding: 2px 8px; border-radius: 999px; font: 800 11px/1.5 var(--oot-sans); letter-spacing: .03em; }
.oot-hp-age.is-child { background: rgba(67, 194, 92, .16); color: #8ee59d; }
.oot-hp-age.is-adult { background: rgba(243, 207, 95, .14); color: var(--oot-gold-soft); }
.oot-hp-age.is-either { background: rgba(205, 238, 255, .12); color: var(--oot-navi); }
.oot-hp-need { display: flex; gap: 2px; }
.oot-hp-need img { width: 26px; height: 26px; object-fit: contain; }
.oot-hp-go { font: 700 12.5px/1 var(--oot-sans); color: var(--oot-gold); }
.oot-hp-list label:focus-within, .oot-hp-bosses button:focus-visible, .oot-hp-reset:focus-visible, .oot-hp-area:focus-visible { outline: 2px solid var(--oot-gold); outline-offset: 2px; }
@media (max-width: 900px) { .oot-hp-list { grid-template-columns: minmax(0, 1fr); } .oot-hp-bosses { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .oot-hp { padding: 12px; }
  .oot-hp-hearts { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
  .oot-hp-h svg { width: 100%; height: auto; }
  .oot-hp-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .oot-hp-need { grid-column: 1; padding-left: 29px; }
  .oot-hp-go { grid-column: 2; grid-row: 2; justify-self: end; }
  .oot-hp-reset { margin-left: 0; }
}