.mechanics-guide { background: #071914; }
.mechanics-guide > h2 { margin-bottom: 44px; }
.mechanic-panel { --guide-accent: #e2bb74; border-top: 1px solid #b8ab7338; padding: 36px 0 32px; }
.mechanic-relight { --guide-accent: #d4b0eb; }
.mechanic-ante { --guide-accent: #83d6b9; }
.mechanic-heading { display: flex; gap: 20px; align-items: center; }
.mechanic-heading h3 { font: clamp(30px, 3.2vw, 46px)/1.1 'Oceanfoot Display', sans-serif; margin: 0; }
.mechanic-steps { padding: 0; margin: 28px 0 24px; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.mechanic-steps li { position: relative; padding: 8px 24px 22px; text-align: center; border-radius: 18px; background: radial-gradient(ellipse at 50% 12%, #87a78b14, transparent 65%), #ffffff03; }
.mechanic-steps li:not(:last-child)::after { content: '→'; position: absolute; top: 86px; right: -32px; font-size: 30px; color: var(--guide-accent); }
.mechanic-art { height: 175px; display: grid; place-items: center; margin-bottom: 16px; }
.mechanic-art img { width: 175px; height: 175px; object-fit: contain; filter: drop-shadow(0 7px 8px #0005); }
.mechanic-type span { font: clamp(44px, 5vw, 70px)/1 'Oceanfoot Display', sans-serif; color: var(--guide-accent); text-shadow: 0 4px #273626; }
.mechanic-steps h4 { margin: 0 0 12px; font: clamp(23px, 2.2vw, 30px)/1.15 'Oceanfoot Display', sans-serif; }
.mechanic-steps p, .mechanics-guide .mechanic-footnote { font-size: 20px; line-height: 1.5; color: #d1dbd3; margin: 0; }
.mechanics-guide .mechanic-footnote { max-width: 900px; font-size: 18px; color: #b9c9be; }
@media(max-width:760px) {
 .mechanic-steps { grid-template-columns: 1fr; gap: 20px; }
 .mechanic-steps li { padding: 18px 20px 24px; }
 .mechanic-art, .mechanic-art img { height: 140px; }
 .mechanic-art img { width: 140px; }
 .mechanic-steps li:not(:last-child)::after { content: '↓'; top: auto; bottom: -24px; right: calc(50% - 12px); z-index: 1; font-size: 25px; }
 .mechanic-steps p { font-size: 18px; }
 .mechanics-guide .mechanic-footnote { font-size: 16px; }
 .mechanic-heading { gap: 14px; }
 .mechanic-heading h3 { font-size: 30px; }
}
@media(min-width:761px) and (max-width:1000px) { .mechanic-steps { gap: 24px; } .mechanic-steps li { padding-inline: 16px; } .mechanic-steps li:not(:last-child)::after { right: -23px; } .mechanic-steps p { font-size: 18px; } }
@media(max-width:760px) {
 .mechanic-steps li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 16px; text-align: left; align-items: center; }
 .mechanic-art { grid-row: 1 / 3; height: 120px; margin: 0; }
 .mechanic-art img { width: 96px; height: 120px; }
 .mechanic-steps h4 { align-self: end; font-size: 24px; margin-bottom: 8px; }
 .mechanic-steps p { align-self: start; }
 .mechanic-type span { font-size: 42px; }
}
/* Contained, silent previews: the three BONUS objects stay in reading order. */
.relight-preview{position:relative;max-width:780px;margin:24px auto;text-align:center;padding:30px 0 16px;isolation:isolate}
.relight-objects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.guide-token{position:relative;min-width:0;border:0;background:none;color:#f7e9bd;padding:0;display:grid;justify-items:center;font:inherit}
.guide-token img{width:100%;max-width:190px;aspect-ratio:1;object-fit:contain;display:block}
.guide-token span{font-size:20px;font-weight:700;margin-top:14px}.guide-lighter{cursor:pointer}.guide-lighter:hover img{filter:brightness(1.12)}
.guide-lighter:focus-visible,.guide-ante-toggle:focus-visible,.guide-replay:focus-visible{outline:3px solid #87e7be;outline-offset:5px;border-radius:12px}
.guide-breath{position:absolute;object-fit:fill;pointer-events:none;opacity:0;z-index:3;transform-origin:0 50%;transform:translateY(-50%) rotate(var(--breath-angle));mix-blend-mode:screen}
[data-phase=breath] .guide-breath{animation:guide-jet .65s ease-out both}
.guide-ember{position:absolute;left:85.5%;top:5.5%;width:9px;height:9px;border-radius:50%;background:#fff1a0;box-shadow:0 0 8px 4px #fa6029;opacity:0;pointer-events:none}
.guide-smoke{position:absolute;left:83%;top:0;width:18px;height:35px;border-radius:50%;background:radial-gradient(ellipse,#dfd8c773,transparent 65%);opacity:0;pointer-events:none}
.guide-joint{max-width:190px;justify-self:center;width:100%}
[data-phase=lit] .guide-joint .guide-ember,.guide-ante-toggle[aria-pressed=true] .guide-ember{opacity:1}
[data-phase=lit] .guide-joint .guide-smoke,.guide-ante-toggle[aria-pressed=true] .guide-smoke{animation:guide-smoke 2s ease-out infinite}
[data-phase=lit] .guide-joint img{animation:guide-caught .5s ease-out}
.guide-spark{position:absolute;left:52%;top:9%;width:7px;height:7px;border-radius:50%;background:#ffe8a0;box-shadow:0 -13px 0 -2px #ffd279,11px -9px 0 -2px #fff4c0,-10px -8px 0 -2px #ffa435;opacity:0}
[data-phase=flick] .guide-spark{animation:guide-fizz .3s linear}
[data-phase=flick] .guide-lighter img{animation:guide-flick .3s ease}
[data-phase=fizzle] .guide-spark{background:#cac9b47a;box-shadow:none;animation:guide-smoke .5s ease-out}
.mechanics-guide .guide-status{font-size:20px;min-height:1.5em;margin:26px 0 16px;color:#d8e8d9}
.guide-replay{min-height:46px;padding:10px 24px;border:1px solid #bba275;border-radius:8px;background:#273c2c;color:#fff1ca;font:inherit;cursor:pointer}
.guide-ante-toggle{position:relative;width:150px;height:175px;border:0;background:none;cursor:pointer;color:#fff1c6;padding:0}.guide-ante-toggle img{width:140px!important;height:140px!important}.guide-ante-toggle span{display:block;font:700 18px/1.2 sans-serif}.guide-ante-toggle .guide-ember{left:91%;top:13%}.guide-ante-toggle .guide-smoke{left:86%;top:6%}
@keyframes guide-flick{50%{transform:rotate(-7deg) translateY(-3px)}}
@keyframes guide-fizz{20%,70%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
@keyframes guide-jet{0%{opacity:0;clip-path:inset(0 100% 0 0)}30%{opacity:1;clip-path:inset(0)}80%{opacity:1}100%{opacity:.3}}
@keyframes guide-caught{40%{transform:scale(1.07)}}
@keyframes guide-smoke{0%{opacity:0;transform:translate(0,0) scale(.7)}35%{opacity:.65}100%{opacity:0;transform:translate(-9px,-35px) scale(1.8)}}
@media(max-width:760px){.relight-objects{gap:8px}.guide-token span{font-size:16px}.mechanics-guide .guide-status{font-size:18px;min-height:3em}.guide-ante-toggle{width:96px;height:120px}.guide-ante-toggle img{width:96px!important;height:96px!important}.guide-ante-toggle span{font-size:14px}.guide-ante-toggle .guide-ember{left:94%;top:13%}.relight-preview{padding-top:26px}}
@media(prefers-reduced-motion:reduce){.relight-preview *,.guide-ante-toggle *{animation:none!important;transition:none!important}[data-phase=lit] .guide-joint .guide-smoke,.guide-ante-toggle[aria-pressed=true] .guide-smoke{opacity:.3}}

.mechanics-guide[data-paused=true] *{animation-play-state:paused!important}

.relight-preview[data-paused=true] *,.guide-ante-toggle[data-paused=true] *{animation-play-state:paused!important}

.mechanics-guide .guide-status.sr-only{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}