/* J-1020-11: How to Play rebuilt as ELI5 sections (one card per rule, side table
   of contents, small looping CSS demos and real game frames, lazy-loaded). */
.htp2 { max-width: 72rem; margin: 0 auto; }
.htp2 h1 { margin: 0; }
/* J-1021-1: Back + title ride a sticky bar under the site topbar; same height stuck or not, so nothing jumps */
.htp2 { --htp-bar-top: 0px; --htp-bar-h: 3.4rem; --htp-stick: calc(var(--htp-bar-top) + var(--htp-bar-h) + .6rem); }
.htp-bar { position: sticky; top: var(--htp-bar-top); z-index: 18; display: flex; align-items: center; gap: 1rem; margin: -.4rem -.65rem .35rem; padding: .4rem .65rem; border: 1px solid transparent; border-radius: 12px; transition: background-color .18s, border-color .18s, box-shadow .18s; }
.htp-bar.is-stuck { background: #0b1020; border-color: rgba(245,197,66,.32); box-shadow: 0 10px 28px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,235,190,.06); }
.htp-bar h1 { line-height: 1.1; }
.htp-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin-bottom: .8rem; }
.htp-lead { flex: 1 1 22rem; margin: 0 !important; color: var(--muted); }
.htp-tools { display: flex; gap: .4rem; }
.htp-all { font: 600 .75rem var(--font); color: var(--ink); background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 999px; padding: .25rem .7rem; cursor: pointer; }
.htp-all:hover { border-color: rgba(245,197,66,.5); }
.htp-layout { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: 1.2rem; align-items: start; }
/* add-on #97969: manual-style contents (side on desktop, collapsible on phone) */
.htp2.card { backdrop-filter: none; }   /* backdrop-filter would trap fixed children inside the card */
.htp-side { position: sticky; top: var(--htp-stick); display: flex; flex-direction: column; gap: .6rem; max-height: calc(100vh - var(--htp-stick) - 4.5rem); }   /* short enough that the column end never pushes CONTENTS under the bar */
.htp-toc { font-size: .8rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(0,0,0,.18); min-height: 0; overflow: auto; }
.htp-toc > summary { list-style: none; cursor: pointer; padding: .5rem .7rem; font: 800 .72rem var(--font); text-transform: uppercase; letter-spacing: .1em; color: var(--gold); }
.htp-toc > summary::-webkit-details-marker { display: none; }
.htp-toc > nav { padding: 0 .4rem .5rem; }
.htp-toc-list, .htp-toc-list ol { list-style: none; margin: 0; padding: 0; }
.htp-toc-list > li { margin-bottom: .2rem; }
.htp-toc-list > li > a { font-weight: 700; color: var(--ink); }
.htp-toc-list ol a { padding-left: 1.6rem; font-size: .76rem; }
.htp-toc a { display: flex; gap: .4rem; color: var(--muted); text-decoration: none; padding: .16rem .35rem; border-radius: 6px; }
.htp-toc a span { color: var(--gold); min-width: 1.4rem; font-variant-numeric: tabular-nums; }
.htp-toc a:hover { color: var(--ink); background: rgba(255,255,255,.07); }
.htp-toc-top { margin-top: .3rem; border-top: 1px solid var(--line); padding-top: .4rem !important; font-size: .74rem; }
.htp-back-top { flex: none; margin: 0; padding: .45rem 1.1rem; }
.htp-chapter { margin-bottom: 1rem; }
.htp2 h2.htp-ch { display: flex; align-items: center; gap: .55rem; margin: 0 0 .5rem; padding: 0; border: 0; font-size: 1.15rem; color: var(--gold); scroll-margin-top: var(--htp-stick); }
.htp-chn { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 8px; background: var(--gold); color: #111; font-size: .9rem; }
.htp-anchor { color: var(--muted); text-decoration: none; font-size: .85em; font-weight: 600; opacity: .35; padding: 0 .25rem; border-radius: 4px; }
.htp-anchor:hover, .htp-anchor:focus-visible { opacity: 1; color: var(--gold); }
.htp-sec > summary .htp-anchor { margin-left: .1rem; }
.htp-totop { display: inline-block; margin: .1rem 0 0 .2rem; font-size: .76rem; color: var(--muted); text-decoration: none; }
.htp-totop:hover { color: var(--gold); }
.v-potion { display: grid; place-items: center; gap: .45rem; position: relative; }
.v-flask { width: 34px; height: 44px; border-radius: 6px 6px 16px 16px; background: linear-gradient(180deg, transparent 30%, #e11d48 30%); border: 2px solid rgba(255,255,255,.5); box-shadow: 0 0 14px rgba(225,29,72,.5); animation: v-pulse 2.4s linear infinite; }
.v-potion .v-hp i { animation: v-heal 2.4s linear infinite; }
.v-heal { position: absolute; top: -.2rem; right: -2.6rem; font: 900 1rem var(--font); color: var(--hp); animation: v-float 2.4s ease-out infinite; opacity: 0; }
@keyframes v-heal { 0%, 22% { width: 50%; } 22.1%, 100% { width: 60%; } }
.htp-sec { border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); margin: 0 0 .45rem; scroll-margin-top: 1rem; }
.htp-sec[open] { background: rgba(255,255,255,.04); border-color: rgba(245,197,66,.28); }
.htp-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; font-weight: 700; color: var(--ink); }
.htp-sec > summary::-webkit-details-marker { display: none; }
.htp-sec > summary::after { content: "▸"; margin-left: auto; color: var(--muted); transition: transform .15s; }
.htp-sec[open] > summary::after { transform: rotate(90deg); }
.htp-n { flex: none; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; background: rgba(245,197,66,.14); color: var(--gold); font-size: .8rem; }
.htp-sec > :not(summary) { margin-left: .8rem; margin-right: .8rem; }
.htp-sec > :last-child { margin-bottom: .8rem; }
.htp-row { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 1rem; align-items: center; }
.htp-txt p { margin: 0 0 .4rem; line-height: 1.5; }
.htp-sub { color: var(--muted); font-size: .9rem; margin: 0 .8rem .6rem; }
.htp-vis { height: 8.5rem; border-radius: 10px; background: radial-gradient(ellipse at 50% 60%, #2a2140, #0d1020 75%); border: 1px solid rgba(255,255,255,.08); display: grid; place-items: center; overflow: hidden; position: relative; }
.htp-vis b { font-weight: 800; }
.htp-pair { grid-template-columns: 1fr 1fr; padding: .3rem; }
.htp-pair figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; min-height: 0; }
.htp-pair img { flex: 1; min-height: 0; width: auto; max-width: 100%; object-fit: contain; }
.htp-pair figcaption { font-size: .7rem; color: var(--muted); }

/* demos */
.v-chips { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; padding: .5rem; }
.v-chips span { font-size: .72rem; padding: .2rem .55rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.v-chips .is-on { color: var(--ink); border-color: var(--gold); animation: v-pulse 2.4s linear infinite; }
.v-chips .v-daily { color: #111; background: var(--gold); border-color: var(--gold); font-weight: 700; }
@keyframes v-pulse { 0%, 100% { box-shadow: 0 0 0 rgba(245,197,66,0); } 50% { box-shadow: 0 0 14px rgba(245,197,66,.6); } }

.v-word { display: flex; gap: .05em; font: 800 1.5rem var(--mono); color: var(--ink); text-shadow: 0 0 10px rgba(245,197,66,.35); }
.v-flash .v-big { position: absolute; inset: 0; display: grid; place-items: center; font: 900 7rem/1 var(--mono); color: var(--gold); opacity: 0; animation: v-big 3.2s ease-out infinite; text-shadow: 0 0 30px rgba(245,197,66,.8); }
@keyframes v-big { 0% { opacity: 0; transform: scale(.6); } 8% { opacity: .95; transform: scale(1.15); } 30% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; } }
.v-flash .v-word b { animation: v-typed 3.2s linear infinite; color: rgba(238,241,255,.45); }
.v-flash .v-word b:nth-child(1) { animation-delay: 0s; } .v-flash .v-word b:nth-child(2) { animation-delay: .1s; } .v-flash .v-word b:nth-child(3) { animation-delay: .2s; }
.v-flash .v-word b:nth-child(4) { animation-delay: .3s; } .v-flash .v-word b:nth-child(5) { animation-delay: .4s; } .v-flash .v-word b:nth-child(6) { animation-delay: .5s; }
@keyframes v-typed { 0%, 35% { color: rgba(238,241,255,.45); } 35.1%, 92% { color: var(--ok); } 92.1%, 100% { color: rgba(238,241,255,.45); } }

.v-timer { width: 80%; }
.v-bar { height: 14px; border-radius: 7px; background: rgba(255,255,255,.08); overflow: hidden; position: relative; }
.v-bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 33%, #0d1020 33%, #0d1020 34%, transparent 34%, transparent 66%, #0d1020 66%, #0d1020 67%, transparent 67%); }
.v-bar i { position: absolute; inset: 0; background: linear-gradient(90deg, #ef4444, #f5c542 50%, #34d399); transform-origin: left; animation: v-drain 4s linear infinite; }
@keyframes v-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.v-thirds { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: .35rem; font: 700 .72rem var(--font); text-align: center; color: var(--muted); }
.v-thirds span:nth-child(1) { color: var(--ok); }

.v-hit { display: grid; place-items: center; gap: .4rem; }
.v-hit .ok { color: var(--ok); } .v-hit .bad { color: var(--bad); animation: v-shake 2.4s linear infinite; }
.v-dmg { position: absolute; top: 18%; right: 22%; font: 900 1.6rem var(--font); color: var(--bad); animation: v-float 2.4s ease-out infinite; opacity: 0; }
.v-hp { width: 9rem; height: 8px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.v-hp i { display: block; height: 100%; width: 80%; background: var(--hp); animation: v-hp 2.4s steps(1, end) infinite; }
@keyframes v-shake { 0%, 20% { transform: none; } 22% { transform: translateX(-3px); } 24% { transform: translateX(3px); } 26%, 100% { transform: none; } }
@keyframes v-float { 0%, 20% { opacity: 0; transform: translateY(6px); } 24% { opacity: 1; } 70% { opacity: 0; transform: translateY(-18px); } 100% { opacity: 0; } }
@keyframes v-hp { 0% { width: 80%; } 22% { width: 62%; background: var(--hp-low); } 40% { width: 62%; background: var(--hp); } }

.v-halls { text-align: center; }
.v-label { font: 800 .9rem var(--font); color: var(--ink); background: rgba(0,0,0,.4); border: 1px solid var(--line); border-radius: 8px; padding: .2rem .6rem; }
.v-pips { display: flex; gap: 4px; justify-content: center; margin-top: .7rem; }
.v-pips i { width: 12px; height: 12px; border-radius: 3px; background: rgba(255,255,255,.12); }
.v-halls .v-pips i.d { background: var(--ok); }
.v-halls .v-pips i.c { background: var(--gold); animation: v-pulse 1.6s linear infinite; }
.v-halls .v-pips i.b { background: #b91c1c; }

.v-line { display: flex; align-items: flex-end; gap: .35rem; }
.v-line img { width: 40px; height: 40px; opacity: .8; }
.v-line img.v-boss { width: 56px; height: 56px; opacity: 1; filter: drop-shadow(0 0 6px #ef4444) drop-shadow(0 0 12px rgba(239,68,68,.7)); animation: v-boss 1.8s linear infinite; }
.v-tag { position: absolute; top: 14%; right: 18%; font: 900 .7rem var(--font); letter-spacing: .1em; color: #fff; background: #b91c1c; border-radius: 4px; padding: .1rem .35rem; }
@keyframes v-boss { 0%, 100% { filter: drop-shadow(0 0 4px #ef4444); } 50% { filter: drop-shadow(0 0 10px #ef4444) drop-shadow(0 0 20px rgba(239,68,68,.8)); } }

.v-defend { display: grid; place-items: center; gap: .5rem; }
.v-banner { font: 900 1.05rem var(--font); letter-spacing: .06em; color: #fff; background: linear-gradient(180deg, #dc2626, #7f1d1d); padding: .25rem .7rem; border-radius: 6px; animation: v-alarm 1.2s linear infinite; }
.v-defend .v-word b { color: #fca5a5; }
@keyframes v-alarm { 0%, 100% { box-shadow: 0 0 0 rgba(239,68,68,0); transform: scale(1); } 50% { box-shadow: 0 0 20px rgba(239,68,68,.8); transform: scale(1.04); } }

.v-gate { display: flex; align-items: center; gap: 1rem; }
.v-gate img { width: 64px; height: 64px; filter: grayscale(.3) brightness(.7); }
.v-arrow { font: 900 1.6rem var(--font); color: var(--gold); animation: v-run 1.4s linear infinite; }
.v-sun { width: 52px; height: 72px; border-radius: 26px 26px 4px 4px; background: radial-gradient(ellipse at 50% 70%, #fff7d1, #f5c542 45%, #b45309 100%); box-shadow: 0 0 26px rgba(245,197,66,.7); }
@keyframes v-run { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(6px); } }

.v-kbd { display: grid; gap: 4px; }
.v-kbd div { display: flex; gap: 4px; }
.v-kbd div:nth-child(2) { margin-left: 10px; } .v-kbd div:nth-child(3) { margin-left: 20px; }
.v-kbd b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 5px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); font: 700 .72rem var(--mono); color: var(--muted); }
.v-kbd b.nx { animation: v-next 2.4s linear infinite; }
.v-kbd b.bad { animation: v-wrong 2.4s linear infinite; }
@keyframes v-next { 0%, 45% { background: rgba(245,197,66,.85); color: #111; box-shadow: 0 0 10px rgba(245,197,66,.8); } 45.1%, 100% { background: rgba(255,255,255,.08); color: var(--muted); box-shadow: none; } }
@keyframes v-wrong { 0%, 55% { background: rgba(255,255,255,.08); color: var(--muted); } 55.1%, 75% { background: var(--bad); color: #fff; } 75.1%, 100% { background: rgba(255,255,255,.08); color: var(--muted); } }

.v-streak { text-align: center; }
.v-count { font: 900 1.8rem var(--font); color: var(--gold); text-shadow: 0 0 14px rgba(245,197,66,.6); }
.v-streak .v-pips i { animation: v-fill 4s linear infinite; }
.v-streak .v-pips i:nth-child(2) { animation-delay: .2s; } .v-streak .v-pips i:nth-child(3) { animation-delay: .4s; } .v-streak .v-pips i:nth-child(4) { animation-delay: .6s; }
.v-streak .v-pips i:nth-child(5) { animation-delay: .8s; } .v-streak .v-pips i:nth-child(6) { animation-delay: 1s; } .v-streak .v-pips i:nth-child(7) { animation-delay: 1.2s; }
.v-streak .v-pips i:nth-child(8) { animation-delay: 1.4s; } .v-streak .v-pips i:nth-child(9) { animation-delay: 1.6s; } .v-streak .v-pips i:nth-child(10) { animation-delay: 1.8s; }
@keyframes v-fill { 0%, 4% { background: rgba(255,255,255,.12); } 4.1%, 85% { background: var(--gold); } 85.1%, 100% { background: rgba(255,255,255,.12); } }

/* move cards: real game frames */
.htp-moves { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; }
.htp-moves figure { margin: 0; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: radial-gradient(ellipse at 50% 70%, #2a2140, #0d1020 80%); overflow: hidden; display: flex; flex-direction: column; }
.htp-moves img { width: 100%; height: 8.5rem; object-fit: contain; object-position: 50% 100%; }
.htp-moves-mage { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.htp-moves-mage img { height: 10rem; }
.htp-moves figcaption { padding: .4rem .55rem .5rem; font-size: .76rem; color: var(--muted); line-height: 1.35; background: rgba(0,0,0,.35); flex: 1; }
.htp-moves figcaption strong { display: block; color: var(--ink); font-size: .85rem; }
.htp-moves figcaption em { float: right; font-style: normal; font-weight: 800; font-size: .66rem; color: #111; background: var(--gold); border-radius: 4px; padding: 0 .3rem; margin-left: .3rem; }
.htp-moves .is-holy { border-color: rgba(245,197,66,.45); box-shadow: inset 0 0 24px rgba(245,197,66,.15); }

.htp2 .howto-keys { margin-bottom: .2rem; }

@media (max-width: 760px) {
  .htp-layout { grid-template-columns: minmax(0, 1fr); }
  .htp-side { position: static; max-height: none; }
  .htp-toc > summary { display: flex; align-items: center; padding: .65rem .8rem; font-size: .8rem; }
  .htp-toc > summary::after { content: "▸ show"; margin-left: auto; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
  .htp-toc[open] > summary::after { content: "▾ hide"; }
  .htp-toc a { font-size: .86rem; padding: .3rem .4rem; }
  .htp-toc-list ol a { font-size: .82rem; }
  .htp-row { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .htp-vis { height: 7.5rem; }
  .htp-moves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .htp-moves img { height: 7rem; }
}
@media (prefers-reduced-motion: reduce) { .htp2 .htp-vis *, .htp2 .htp-vis { animation: none !important; } }
/* QC pass 1: clear the sticky game header; zoom the padded hero frames */
.htp-sec { scroll-margin-top: var(--htp-stick); }
.htp-moves img { transform: scale(1.55); transform-origin: 50% 88%; }
.htp-moves-mage img { transform: scale(1.45); transform-origin: 50% 92%; }
.htp-pair img { transform: scale(1.5); transform-origin: 50% 90%; }
.htp-pair figure:last-child img { transform: scale(1.25); }
.htp-moves figcaption, .htp-pair figcaption { position: relative; z-index: 1; }
.htp-pair figcaption { background: rgba(0,0,0,.4); border-radius: 4px; padding: 0 .35rem; }
/* J-1020-12: looping move clips (animated WebP built from the combat frames, trimmed tight) */
.htp-moves img.htp-clip { transform: none; object-position: 50% 100%; padding-top: .3rem; }
/* J-1020-12: real in-game captures (muted Cronus screencasts) replace the CSS mock-ups */
.htp-row:has(.is-cap) { grid-template-columns: minmax(0, 1fr) 21rem; }
.htp-vis.is-cap { height: auto; background: #07080d; padding: 0; }
.htp-vis.is-cap img { display: block; width: 100%; height: auto; }
.htp-moves img.htp-scene { object-fit: cover; object-position: 50% 40%; padding-top: 0; }
@media (max-width: 760px) { .htp-row:has(.is-cap) { grid-template-columns: minmax(0, 1fr); } .htp-vis.is-cap { height: auto; max-width: 26rem; } }
/* J-1020-12 review: reduced motion gets a still frame (assets/howto/still/) via <picture>; picture adds no box */
.htp2 picture { display: contents; }