/* Ladderlet page - "Night Study" art direction from the game (candlelight, parchment ink, brass, arcane green) */
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-semibold.woff2?v=2bf13df826") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/assets/fonts/source-serif-4-regular.woff2?v=8f0666da04") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/assets/fonts/source-serif-4-semibold.woff2?v=c144a942d6") format("woff2"); font-weight: 600; font-display: swap; }

.theme-ladderlet {
  --ll-paper: #14120d; --ll-raised: #2a261d; --ll-sunken: #0f0d09; --ll-ink: #f6f1e6; --ll-ink-soft: #c9c0ae;
  --ll-candle: #e9c77d; --ll-brass: #b08d57; --ll-green: #5fc69a; --ll-praise: #d9b15e; --ll-alert: #c96a55;
  --text: var(--ll-ink); --text-dim: var(--ll-ink-soft); --text-faint: #8f8676; --line: rgba(176, 141, 87, .28); --accent: var(--ll-candle);
  background: radial-gradient(900px 600px at 50% -5%, rgba(233, 199, 125, .14), transparent 65%), linear-gradient(180deg, #17140e 0%, var(--ll-paper) 40%, #0c0b08 100%);
  font-family: "Source Serif 4", Georgia, serif;
}
.theme-ladderlet h1, .theme-ladderlet h2, .theme-ladderlet h3 { font-family: "Fraunces", Georgia, serif; font-weight: 600; letter-spacing: -0.01em; color: var(--ll-ink); }
.theme-ladderlet .eyebrow { font-family: var(--font-display); color: var(--ll-candle); }
.theme-ladderlet .lede, .theme-ladderlet .card__text { color: var(--ll-ink-soft); }
.theme-ladderlet main a { color: var(--ll-candle); }
.theme-ladderlet .gradient-text { background: linear-gradient(100deg, #fff4dc, var(--ll-candle) 55%, var(--ll-green)); -webkit-background-clip: text; background-clip: text; }
.theme-ladderlet .btn { font-family: var(--font-display); }
.theme-ladderlet .btn--primary { background: linear-gradient(#f0d394, #c99d48); color: #1a1408; }
.theme-ladderlet .btn--ghost { color: var(--ll-ink); border-color: rgba(233, 199, 125, .4); }
.theme-ladderlet .card { background: linear-gradient(170deg, rgba(42, 38, 29, .85), rgba(20, 18, 13, .9)); border-color: var(--line); }
.theme-ladderlet .card__icon { background: rgba(233, 199, 125, .12); color: var(--ll-candle); }
.theme-ladderlet .promises li { background: rgba(42, 38, 29, .6); border-color: var(--line); }
.theme-ladderlet .promises svg { stroke: var(--ll-green); }
.theme-ladderlet .cta-band { background: radial-gradient(600px 300px at 50% 0%, rgba(233, 199, 125, .18), transparent 70%), rgba(42, 38, 29, .5); border-color: var(--line); }
.theme-ladderlet .store-btn { border-color: rgba(233, 199, 125, .4); }

/* ---------- Hero: candlelit study ---------- */
.ll-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(3rem, 7vw, 5rem); }
.ll-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.ll-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .55)); }
.ll-hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.ll-hero h1 { font-size: clamp(2.8rem, 7.5vw, 5rem); margin-bottom: .25em; }
.ll-hero__tag { font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: clamp(1.3rem, 3vw, 1.7rem); color: var(--ll-candle); margin-bottom: .8rem; }
.ll-research { display: flex; gap: .7rem; align-items: flex-start; margin: 1.4rem 0 1.8rem; padding: .9rem 1.1rem; border-radius: 12px; background: rgba(95, 198, 154, .08); border: 1px solid rgba(95, 198, 154, .28); color: #d6f0e3; font-size: 1rem; }
.ll-research svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--ll-green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
@media (max-width: 860px) { .ll-hero__grid { grid-template-columns: 1fr; } }

/* ---------- Ladder (shared by hero + demo) ---------- */
.ll-ladder { position: relative; display: grid; gap: 12px; justify-content: center; padding: 18px 34px; width: fit-content; margin-inline: auto; }
.ll-ladder::before, .ll-ladder::after { content: ""; position: absolute; top: 0; bottom: 0; width: 6px; border-radius: 3px; background: linear-gradient(180deg, transparent, var(--ll-brass) 12%, var(--ll-brass) 88%, transparent); opacity: .75; }
.ll-ladder::before { left: 10px; } .ll-ladder::after { right: 10px; }
.ll-rung { display: flex; gap: 8px; justify-content: center; }
.ll-cell { width: clamp(42px, 9vw, 58px); height: clamp(48px, 10vw, 64px); display: grid; place-items: center; border-radius: 9px; font-family: "Source Serif 4", Georgia, serif; font-weight: 600; font-size: clamp(1.4rem, 3.4vw, 1.9rem); color: var(--ll-ink); background: linear-gradient(#2c271d, #1b1812); border: 1px solid rgba(176, 141, 87, .55); box-shadow: inset 0 1px 0 rgba(255, 240, 200, .08), 0 4px 10px rgba(0, 0, 0, .35); transition: transform .35s var(--ease), background .35s, color .35s, box-shadow .35s; }
.ll-cell.is-given { border-style: dashed; color: #e8dcc2; }
.ll-cell.is-hole { background: var(--ll-sunken); border-style: dashed; color: var(--ll-candle); }
.ll-rung.is-active .ll-cell.is-hole { box-shadow: 0 0 0 2px var(--ll-candle), 0 0 18px rgba(233, 199, 125, .45); }
.ll-rung.is-dim { opacity: .55; }
.ll-rung.is-locked .ll-cell { color: #0e1a14; background: linear-gradient(#8de0bb, #4fb487); border-color: #8de0bb; box-shadow: 0 0 18px rgba(95, 198, 154, .5); }
.ll-rung.is-flip .ll-cell { animation: ll-flip .5s var(--ease) both; }
.ll-rung.is-flip .ll-cell:nth-child(2) { animation-delay: .06s; } .ll-rung.is-flip .ll-cell:nth-child(3) { animation-delay: .12s; } .ll-rung.is-flip .ll-cell:nth-child(4) { animation-delay: .18s; }
.ll-rung.is-shake { animation: ll-shake .4s; }
@keyframes ll-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@keyframes ll-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ---------- Demo ---------- */
.ll-demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 900px) { .ll-demo { grid-template-columns: 1fr; } }
.ll-play { padding: clamp(1rem, 3vw, 1.5rem); border-radius: 22px; background: linear-gradient(180deg, rgba(42, 38, 29, .92), rgba(15, 13, 9, .96)); border: 1px solid var(--line); box-shadow: 0 30px 70px rgba(0, 0, 0, .5), 0 0 80px rgba(233, 199, 125, .06); width: 100%; max-width: 540px; margin-inline: auto; outline: none; }
.ll-play__top { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-display); font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ll-ink-soft); }
.ll-hearts { display: flex; gap: .3rem; }
.ll-hearts svg { width: 20px; height: 20px; fill: var(--ll-alert); transition: opacity .3s; }
.ll-hearts svg.is-lost { opacity: .2; }
.ll-clue { min-height: 3.2em; margin: .8rem 0 .2rem; display: flex; gap: .6rem; align-items: flex-start; font-style: italic; font-size: 1.1rem; color: #efe6d2; }
.ll-clue svg { width: 20px; height: 20px; flex: none; margin-top: 4px; fill: none; stroke: var(--ll-candle); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ll-verdict { min-height: 1.5em; margin: 0 0 .6rem; font-family: var(--font-display); font-size: .95rem; }
.ll-verdict.is-praise { color: var(--ll-praise); } .ll-verdict.is-alert { color: var(--ll-alert); } .ll-verdict.is-good { color: var(--ll-green); }
.ll-keys { display: grid; gap: 6px; margin-top: .6rem; user-select: none; -webkit-user-select: none; }
.ll-keys div { display: flex; gap: 5px; justify-content: center; }
.ll-key { flex: 1; max-width: 44px; min-height: 46px; border-radius: 7px; border: 1px solid rgba(176, 141, 87, .4); background: #221e16; color: var(--ll-ink); font: 600 1.05rem "Source Serif 4", Georgia, serif; cursor: pointer; }
.ll-key:hover { background: #2f2a1f; }
.ll-key:active { transform: translateY(1px); }
.ll-win { display: none; margin-top: 1rem; padding: 1rem; border-radius: 14px; text-align: center; background: rgba(95, 198, 154, .1); border: 1px solid rgba(95, 198, 154, .3); }
.ll-play.is-solved .ll-win { display: block; }
.ll-play.is-solved .ll-keys, .ll-play.is-solved .ll-clue { display: none; }

.ll-steps { list-style: none; padding: 0; display: grid; gap: .9rem; }
.ll-steps li { padding: 1rem 1.1rem; border-radius: 12px; background: rgba(42, 38, 29, .55); border: 1px solid var(--line); color: var(--ll-ink-soft); }
.ll-steps li strong { color: var(--ll-ink); font-family: "Fraunces", Georgia, serif; font-weight: 600; }

/* ---------- Screenshots ---------- */
.shots { display: flex; gap: clamp(1rem, 3vw, 2rem); justify-content: center; flex-wrap: wrap; }
.shot { margin: 0; width: min(250px, 80vw); text-align: center; }
.shot img { width: 100%; border-radius: 28px; border: 6px solid #1c1913; box-shadow: 0 0 0 1px rgba(176, 141, 87, .4), 0 30px 60px rgba(0, 0, 0, .55); }
.shot figcaption { margin-top: .9rem; font-size: .95rem; color: var(--ll-ink-soft); }