/* Hofstadter's law lesson. All rules scoped under .hof-* */

.hof-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hof-note { font-size: 13px; color: var(--dim); text-align: center; max-width: 300px; }
.hof-hero img { display: block; width: 280px; max-width: 100%; max-height: 30vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123,92,253,.3)); }
.hof-hero.art img { width: 300px; max-height: 36vh; }
.hof-hero.small img { max-height: 18vh; }

/* the law */
.hof-quote { width: 100%; max-width: 340px; padding: 22px 18px; border-radius: 18px; background: var(--surface); border-left: 4px solid var(--gold); display: flex; flex-direction: column; gap: 10px; }
.hof-quote b { font: 600 20px/1.4 var(--serif); }
.hof-quote small { font-size: 13px; color: var(--dim); font-weight: 700; }

/* padding for the law */
.hof-pad { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 16px; }
.hof-pr { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; }
.hof-pr span { font-size: 14px; font-weight: 700; color: var(--dim); }
.hof-pr b { font: 800 16px var(--mono); grid-column: 2; grid-row: 1; }
.hof-pt { grid-column: 1 / -1; position: relative; height: 20px; border-radius: 10px; background: var(--raised); border: 1px solid var(--line); }
.hof-pt i { display: block; height: 100%; border-radius: 10px; background: var(--violet-bright); transition: width .4s cubic-bezier(.2,.8,.2,1); }
.hof-pr.g .hof-pt i { background: var(--gold); }
.hof-pr.g b { color: var(--gold); }
.hof-pt em { position: absolute; top: 26px; margin-left: 4px; font: 800 13px var(--sans); font-style: normal; color: var(--red); white-space: nowrap; transition: left .3s ease-out; transform: translateX(-100%); }
.hof-pt em::after { content: ' →'; }
.hof-pt em.jump { animation: hof-jump .4s ease-out; }
@keyframes hof-jump { 0% { opacity: .2; } 100% { opacity: 1; } }
.hof-pr.g { margin-bottom: 16px; }

/* the boxes */
.hof-count { display: flex; align-items: baseline; gap: 10px; }
.hof-count small { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.hof-count b { font: 800 22px var(--mono); color: var(--gold); }
.hof-boxes { position: relative; width: 100%; max-width: 330px; height: 260px; }
.hof-boxes.small { max-width: 250px; height: 150px; }
.hof-box { position: absolute; margin: 0; padding: 3px; border: 0; background: none; cursor: pointer; animation: hof-in .3s ease-out; }
.hof-box i { display: block; width: 100%; height: 100%; border-radius: 10px; border: 2px solid rgba(255,255,255,.18); box-shadow: inset 0 -4px 0 rgba(0,0,0,.25); }
.hof-box.d1 i { background: #6c4fe8; }
.hof-box.d2 i { background: #8b6ff5; }
.hof-box.d3 i { background: #a691ff; }
.hof-box.d4 i { background: #c3b5ff; }
.hof-box.gone { display: none; }
.hof-box.star i { background: rgba(252, 192, 80, .14); border-color: var(--gold); box-shadow: none; }
.hof-box.star b { position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold); font-size: 22px; }
.hof-boxes:not(.live) .hof-box { cursor: default; }
.hof-boxes.live .hof-box:not(.star):active i { transform: scale(.94); }
.hof-boxes.top .hof-box:not(.d1):not(.star) { opacity: .45; }
@keyframes hof-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@media (max-height: 700px) { .hof-boxes { height: 220px; max-width: 300px; } .hof-boxes.small { height: 120px; max-width: 220px; } }

/* the guess chips */
.choices.hof-est { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.choices.hof-est .choice { justify-content: center; font: 800 17px var(--mono); min-height: 46px; padding: 8px; }

/* layers */
.hof-levels { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 10px; }
.hof-lr { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.hof-lr span { font-size: 14px; font-weight: 700; color: var(--dim); }
.hof-lr b { font: 800 17px var(--mono); }
.hof-lt { grid-column: 1 / -1; grid-row: 2; height: 16px; border-radius: 8px; background: var(--raised); border: 1px solid var(--line); }
.hof-lt i { display: block; height: 100%; width: 0; border-radius: 8px; background: var(--violet-bright); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.hof-lr.seen i { background: var(--gold); }
.hof-lr.seen span, .hof-lr.seen b { color: var(--gold); }
.hof-levels.on .hof-lt i { width: var(--w); }
@media (max-height: 700px) { .hof-boxes { height: 200px; } }