/* LWL Fireside — visual-novel scene engine. All rules scoped under .lwl-fireside. */

.lwl-fireside{--fs-accent:#c07a2c;--fs-accent-2:#e6b46e;position:relative;max-width:920px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
.lwl-fireside *{box-sizing:border-box}
.lwl-fireside .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* width:100% pins the stage to its container so aspect-ratio derives HEIGHT from
   width. Without it, min-height + aspect-ratio compute width from height (540*1.6=
   864px) and the stage overflows a narrower console column, clipping the top-right
   controls. max-height caps the letterboxing when the column is very narrow. */
.lwl-fireside .fs-stage{position:relative;width:100%;border-radius:14px;overflow:hidden;min-height:min(74vh,540px);max-height:min(82vh,600px);aspect-ratio:16/10;background:#0b0704;user-select:none}

.lwl-fireside .fs-cam{position:absolute;inset:0;transform:scale(1.07);transition:transform 2.2s cubic-bezier(.2,.7,.2,1);z-index:0}
.lwl-fireside.is-open .fs-cam{transform:scale(1)}
.lwl-fireside .fs-bg{position:absolute;inset:-2%;background:radial-gradient(65% 55% at 50% 32%,#6a4526,#4c2f18 40%,#2a1810 70%,#160d06 100%);background-size:cover;background-position:center;filter:saturate(1.03) brightness(.95);animation:fsKen 26s ease-in-out infinite alternate}
.lwl-fireside .fs-shaft{position:absolute;top:-10%;height:150%;background:linear-gradient(180deg,rgba(255,214,140,.15),transparent 70%);filter:blur(6px);pointer-events:none;transform:rotate(14deg)}
.lwl-fireside .fs-shaft.a{left:22%;width:120px}
.lwl-fireside .fs-shaft.b{left:58%;width:90px;opacity:.75}
.lwl-fireside .fs-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 100% at 50% 40%,transparent 45%,rgba(0,0,0,.55) 100%)}
.lwl-fireside .fs-motes{position:absolute;inset:0;pointer-events:none}
.lwl-fireside .fs-mote{position:absolute;border-radius:50%;background:rgba(255,224,160,.8);animation:fsDrift linear infinite}

.lwl-fireside .fs-chars{position:absolute;left:0;right:0;top:56px;bottom:150px;display:flex;justify-content:space-between;align-items:flex-end;padding:0 5%;z-index:3}
.lwl-fireside .fs-char{position:relative;text-align:center;opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.25,1),filter .35s ease}
.lwl-fireside.is-open .fs-char{opacity:1;transform:translateY(0)}
.lwl-fireside .fs-char.side-l{transform:translateX(-40px) translateY(14px)}
.lwl-fireside .fs-char.side-r{transform:translateX(40px) translateY(14px);transition-delay:.15s}
.lwl-fireside.is-open .fs-char.side-l,.lwl-fireside.is-open .fs-char.side-r{transform:translateX(0) translateY(0)}
.lwl-fireside .fs-char.is-dim{filter:grayscale(.5) brightness(.55);opacity:.66}
.lwl-fireside .fs-char.is-active{filter:none;opacity:1}
.lwl-fireside .fs-glow{position:absolute;inset:-14px -6px 30px;background:radial-gradient(60% 55% at 50% 45%,rgba(255,196,110,.32),transparent 70%);opacity:0;transition:opacity .4s;z-index:-1}
.lwl-fireside .fs-char.is-active .fs-glow{opacity:1}
.lwl-fireside .fs-art{will-change:transform}
.lwl-fireside .fs-art svg{display:block;height:auto}

/* ── micro-life: cross-fade expression swaps, blink, mouth-flap, camera push ── */
.lwl-fireside .fs-art{transition:opacity .18s ease}
.lwl-fireside .fs-eyes{transform-box:fill-box;transform-origin:center center}
.lwl-fireside .fs-eyes.fs-blink{animation:fsBlink .2s ease}
@keyframes fsBlink{0%,100%{transform:scaleY(1)}42%,58%{transform:scaleY(.06)}}
.lwl-fireside .fs-mouth{transform-box:fill-box;transform-origin:center top}
.lwl-fireside .fs-char.is-talking .fs-mouth{animation:fsTalk .22s ease-in-out infinite}
@keyframes fsTalk{0%,100%{transform:scaleY(.7)}50%{transform:scaleY(1.5)}}
/* gentle camera drift toward the active speaker (over the existing .fs-cam 2.2s ease) */
.lwl-fireside.is-open.cam-sensei .fs-cam{transform:scale(1.06) translateX(2%)}
.lwl-fireside.is-open.cam-you .fs-cam{transform:scale(1.06) translateX(-2%)}
.lwl-fireside .fs-art.breathe{animation:fsBreathe 4s ease-in-out infinite}
.lwl-fireside .fs-char-name{margin-top:2px;color:var(--fs-accent-2);font-size:12px;letter-spacing:.08em}
.lwl-fireside .fs-char.is-active .fs-art{transform:translateY(-4px) scale(1.05)}
.lwl-fireside .fs-char.is-dim .fs-art{transform:scale(.93)}

.lwl-fireside .fs-lb{position:absolute;left:0;right:0;height:0;background:#0b0704;z-index:4;transition:height .7s ease;pointer-events:none}
.lwl-fireside .fs-lb.top{top:0}.lwl-fireside .fs-lb.bot{bottom:0}
.lwl-fireside.is-open .fs-lb{height:16px}

.lwl-fireside .fs-topbar{position:absolute;top:12px;left:16px;right:14px;display:flex;justify-content:space-between;align-items:center;z-index:9;opacity:0;transition:opacity .6s}
.lwl-fireside.is-open .fs-topbar{opacity:1}
.lwl-fireside .fs-loc{color:var(--fs-accent-2);font-size:12px;letter-spacing:.13em;text-transform:uppercase}
.lwl-fireside .fs-ctrls{display:flex;gap:6px}
.lwl-fireside .fs-btn{background:rgba(244,217,168,.12);border:.5px solid rgba(244,217,168,.4);color:var(--fs-accent-2);border-radius:20px;padding:5px 11px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;line-height:1.2}
.lwl-fireside .fs-btn:hover{background:rgba(244,217,168,.24)}
.lwl-fireside .fs-btn.is-on{background:rgba(244,217,168,.34)}

.lwl-fireside .fs-scroll{position:absolute;top:56px;left:50%;transform:translateX(-50%) translateY(16px) scale(.96);width:min(440px,86%);
	background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.42 0 0 0 0 0.3 0 0 0 0 0.12 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"), linear-gradient(180deg,#f8efd8,#f0e2c1 50%,#e4cd9e);
	border:1.5px solid #6a4620;border-radius:8px;padding:16px 22px 14px;
	opacity:0;pointer-events:none;z-index:6;
	transition:transform .5s cubic-bezier(.2,.85,.25,1),opacity .45s;
	box-shadow:0 16px 42px rgba(0,0,0,.5), 0 0 32px 5px rgba(255,196,110,.24),
		inset 0 0 0 4px #f4e6c6, inset 0 0 0 5.5px #c69a4e, inset 0 0 0 6.6px rgba(168,127,54,.55),
		inset 0 0 28px rgba(107,74,30,.3), inset 0 10px 12px -8px rgba(122,86,32,.45), inset 0 -10px 12px -8px rgba(122,86,32,.45)}
.lwl-fireside .fs-scroll.is-open{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.lwl-fireside .fs-scroll::before,.lwl-fireside .fs-scroll::after{content:"";position:absolute;left:-13px;right:-13px;height:26px;background:radial-gradient(circle 13px at 13px 50%,#f6e2b0,#c69a4e 55%,#6a4620) no-repeat left center/26px 26px,radial-gradient(circle 13px at 13px 50%,#f6e2b0,#c69a4e 55%,#6a4620) no-repeat right center/26px 26px,linear-gradient(180deg,#f3ddac,#d9ae67 28%,#b3823a 55%,#8a5f28 80%,#6a4620) no-repeat center/100% 18px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.lwl-fireside .fs-scroll::before{top:-13px}
.lwl-fireside .fs-scroll::after{bottom:-13px}
.lwl-fireside .fs-scroll-h{display:flex;align-items:center;justify-content:center;gap:10px;color:#8a5a1e;font-family:Georgia,"Times New Roman",serif;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin:4px 0 10px}
.lwl-fireside .fs-scroll-h::before,.lwl-fireside .fs-scroll-h::after{content:"";height:1px;flex:0 0 22px;background:linear-gradient(90deg,transparent,#b8863b)}
.lwl-fireside .fs-scroll-h::after{background:linear-gradient(90deg,#b8863b,transparent)}
.lwl-fireside .fs-scroll-body{display:flex;flex-direction:column}
.lwl-fireside .fs-scroll-item{display:flex;align-items:baseline;gap:9px;padding:8px 3px;border-top:1px solid rgba(168,127,54,.26)}
.lwl-fireside .fs-scroll-item:first-child{border-top:0}
.lwl-fireside .fs-rune{flex:none;color:#b8863b;font-size:12px}
.lwl-fireside .fs-item-line{line-height:1.5}
.lwl-fireside .fs-item-title{color:#4a3620;font-family:Georgia,"Times New Roman",serif;font-weight:600;font-size:14px}
.lwl-fireside .fs-item-detail{color:#7a5f3e;font-style:italic;font-size:13px}

.lwl-fireside .fs-box{position:absolute;left:20px;right:20px;bottom:18px;background:linear-gradient(175deg,#2e1f11,#1a1008);border:.5px solid rgba(230,180,110,.42);border-radius:12px;padding:15px 20px 17px;min-height:96px;cursor:pointer;z-index:7;box-shadow:0 10px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,220,160,.12);opacity:0;transition:opacity .6s,background .4s}
.lwl-fireside.is-open .fs-box{opacity:1}
.lwl-fireside .fs-box.is-l1{background:linear-gradient(175deg,#341a1e,#1e0e10)}
.lwl-fireside .fs-headrow{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.lwl-fireside .fs-nameplate{display:inline-block;background:var(--fs-accent);color:#fff2dd;font-size:12px;font-weight:500;padding:3px 13px;border-radius:6px}
.lwl-fireside .fs-es-chip{display:none;align-items:center;gap:4px;background:rgba(214,120,140,.2);border:.5px solid rgba(214,120,140,.5);color:#f0bcc8;font-size:11px;padding:2px 9px;border-radius:6px;text-transform:uppercase;letter-spacing:.05em}
.lwl-fireside .fs-es-chip.is-on{display:inline-flex}
.lwl-fireside .fs-text{color:#f6ecd9;font-size:16.5px;line-height:1.55;min-height:46px;font-family:Georgia,"Times New Roman",serif}
.lwl-fireside .fs-cta{margin-top:8px}
.lwl-fireside .fs-cta-btn{background:var(--fs-accent);border:none;color:#fff2dd;border-radius:8px;padding:10px 20px;font-size:14px;font-weight:500;cursor:pointer}
.lwl-fireside .fs-cta-btn.done{background:#3b6d11}
.lwl-fireside .fs-choices{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.lwl-fireside .fs-choice-prompt{flex-basis:100%;width:100%;margin:0 0 4px;font-size:16px;font-weight:600;color:#fff5e6;letter-spacing:.01em}
.lwl-fireside .fs-choice{background:rgba(244,217,168,.14);border:.5px solid rgba(244,217,168,.5);color:var(--fs-accent-2);border-radius:8px;padding:8px 16px;font-size:14px;cursor:pointer}
.lwl-fireside .fs-choice.ok{background:#3b6d11;border-color:#3b6d11;color:#eaf3de}
.lwl-fireside .fs-choice.no{background:#791f1f;border-color:#791f1f;color:#fceded}
.lwl-fireside .fs-next{position:absolute;right:18px;bottom:13px;color:var(--fs-accent-2);font-size:12px;opacity:0;transition:opacity .2s}

.lwl-fireside .fs-black{position:absolute;inset:0;background:#0b0704;z-index:50;display:flex;align-items:center;justify-content:center;transition:opacity 1s ease}
.lwl-fireside.is-open .fs-black{opacity:0;pointer-events:none}
.lwl-fireside .fs-title{text-align:center;opacity:0;transform:scale(.96);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.lwl-fireside .fs-title.show{opacity:1;transform:scale(1)}
.lwl-fireside .fs-title.recede{opacity:0;transform:scale(1.16) translateY(-24px)}
.lwl-fireside .fs-bloom{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(58% 46% at 50% 64%,rgba(255,201,122,.6),rgba(255,178,90,.14) 45%,transparent 72%);opacity:0}
.lwl-fireside .fs-bloom.flash{animation:fsBloom 1.5s ease-out forwards}
@keyframes fsBloom{0%{opacity:0}16%{opacity:.9}100%{opacity:0}}
.lwl-fireside.is-reduced .fs-bloom{display:none}
.lwl-fireside .fs-eyebrow{color:#c9a25f;font-size:12px;letter-spacing:.36em;margin-bottom:12px;text-transform:uppercase}
.lwl-fireside .fs-rule{width:42px;height:1px;background:#8a6a3a;margin:0 auto 14px}
.lwl-fireside .fs-title-main{color:#f4e6cc;font-size:30px;font-family:Georgia,"Times New Roman",serif}

.lwl-fireside .fs-transcript{position:absolute;inset:52px 16px 16px;background:rgba(15,10,6,.97);border:.5px solid rgba(230,180,110,.4);border-radius:12px;padding:16px 18px;overflow:auto;display:none;z-index:12;color:#eadcc6;font-size:14px;line-height:1.7}
.lwl-fireside .fs-transcript.is-open{display:block}
.lwl-fireside .fs-transcript h3{color:var(--fs-accent-2);letter-spacing:.1em;font-size:12px;margin:0 0 12px;text-transform:uppercase;font-weight:500}
.lwl-fireside .fs-transcript p{margin:0 0 9px}
.lwl-fireside .fs-transcript .who{font-weight:600}

.lwl-fireside .fs-caption{text-align:center;color:#8a8378;font-size:12px;margin-top:8px}
.lwl-fireside .fs-fire{position:absolute;bottom:150px;left:50%;transform:translateX(-50%);width:60px;height:28px;z-index:3;pointer-events:none}
.lwl-fireside .fs-flame{position:absolute;bottom:0;background:#ffb43c;border-radius:50% 50% 45% 45%;filter:blur(1px);left:19px;width:22px;height:28px;animation:fsFlick 1.1s ease-in-out infinite}
.lwl-fireside .fs-flame.inner{background:#ffe08a;left:25px;width:11px;height:17px;filter:none;animation-duration:.8s}

.lwl-fireside .fs-noscript,.lwl-fireside .lwl-fireside-noscript{color:#2b2b33;padding:16px}

@keyframes fsKen{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.06) translate(-1.2%,-1%)}}
@keyframes fsBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.006)}}
@keyframes fsDrift{0%{transform:translateY(0);opacity:0}25%{opacity:.7}100%{transform:translateY(-160px) translateX(14px);opacity:0}}
@keyframes fsFlick{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.2) translateX(2px)}}

@media (max-width:640px){
	.lwl-fireside .fs-chars{padding:0 3%;bottom:158px;top:52px}
	.lwl-fireside .fs-art svg{width:104px}
	.lwl-fireside .fs-char.side-r .fs-art svg{width:92px}
	.lwl-fireside .fs-title-main{font-size:23px}
	.lwl-fireside .fs-text{font-size:15px}
	.lwl-fireside .fs-loc{font-size:11px}
}

/* Reduced motion / reduce-fx: no cinematics, everything visible and calm. */
.lwl-fireside.is-reduced .fs-cam{transform:none;transition:none}
.lwl-fireside.is-reduced.cam-sensei .fs-cam,.lwl-fireside.is-reduced.cam-you .fs-cam{transform:none}
.lwl-fireside.is-reduced .fs-art{transition:none}
.lwl-fireside.is-reduced .fs-eyes,.lwl-fireside.is-reduced .fs-mouth{animation:none!important;transform:none!important}
.lwl-fireside.is-reduced .fs-bg{animation:none}
.lwl-fireside.is-reduced .fs-art.breathe{animation:none}
.lwl-fireside.is-reduced .fs-mote,.lwl-fireside.is-reduced .fs-flame{display:none}
.lwl-fireside.is-reduced .fs-black{display:none}
.lwl-fireside.is-reduced .fs-char{opacity:1;transform:none;transition:none}
.lwl-fireside.is-reduced .fs-box,.lwl-fireside.is-reduced .fs-topbar,.lwl-fireside.is-reduced .fs-lb{transition:none}
@media (prefers-reduced-motion:reduce){
	.lwl-fireside .fs-bg{animation:none}
	.lwl-fireside .fs-art.breathe{animation:none}
	.lwl-fireside .fs-mote{display:none}
}

/* ── lwl-path integration ──────────────────────────────────────────────────
   When a Fireside scene supersedes a stepping-stone intro lesson, the flat prose
   is kept in the DOM (no-JS / screen readers) but hidden once the scene mounts. */
.lwl-fireside[data-fs-mounted] ~ .lwl-fireside-superseded{display:none}

/* Let the cinematic scene OWN the inner console: no lesson-card chrome, no duplicate
   header, and — crucially — suppress lwl-path's full-bleed per-stone backdrop + its
   gradient so the same room doesn't render twice (the "doubled background"). The scene
   then fills the console edge-to-edge with the crisp room, no black borders. */
.lwl-path-viewport:has(.lwl-path-lesson--fireside){padding:0}
.lwl-path-viewport:has(.lwl-path-lesson--fireside)::before,
.lwl-path-viewport:has(.lwl-path-lesson--fireside)::after{display:none!important}
.lwl-path-lesson--fireside{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;max-width:none!important;width:100%;margin:0}
.lwl-path-lesson--fireside > .lwl-path-lesson__header{display:none}
.lwl-path-lesson--fireside > .lwl-path-lesson__content{padding:0!important;background:none!important;min-height:calc(100vh - 172px);display:flex;flex-direction:column;justify-content:center}
.lwl-path-lesson--fireside .lwl-fireside{max-width:none;width:100%;margin:0}
/* Fill: stage spans the console width + a tall height; drop the 16:10 letterbox and
   the cinematic bars so the room (background-size:cover) fills with no black edges. */
.lwl-path-lesson--fireside .fs-stage{width:100%;aspect-ratio:auto;height:min(72vh,780px);min-height:500px;border-radius:14px}
.lwl-path-lesson--fireside .fs-lb{display:none}
/* Keep the cast + dialogue centred within the now-wide stage. */
.lwl-path-lesson--fireside .fs-chars{left:50%;right:auto;transform:translateX(-50%);width:min(1180px,94%);padding:0 3%}
.lwl-path-lesson--fireside .fs-box{left:50%;right:auto;transform:translateX(-50%);width:min(940px,94%)}

/* ── Scene-complete state (animated, centred overlay) ────────────────────── */
.lwl-fireside .fs-complete{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;background:radial-gradient(62% 62% at 50% 50%,rgba(20,12,6,.5),rgba(9,6,3,.82));animation:fsCompFade .5s ease-out}
@keyframes fsCompFade{from{opacity:0}to{opacity:1}}
.lwl-fireside .fs-seal{width:62px;height:62px;filter:drop-shadow(0 0 15px rgba(230,180,110,.6))}
.lwl-fireside .fs-seal svg{width:100%;height:100%;overflow:visible}
.lwl-fireside .fs-seal-ring{fill:none;stroke:var(--fs-accent-2);stroke-width:3;stroke-linecap:round;stroke-dasharray:176;stroke-dashoffset:176;transform:rotate(-90deg);transform-origin:50% 50%;animation:fsSealRing .72s cubic-bezier(.2,.8,.2,1) forwards}
.lwl-fireside .fs-seal-check{fill:none;stroke:var(--fs-accent-2);stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:46;stroke-dashoffset:46;animation:fsSealCheck .42s ease-out .56s forwards}
@keyframes fsSealRing{to{stroke-dashoffset:0}}
@keyframes fsSealCheck{to{stroke-dashoffset:0}}
.lwl-fireside .fs-complete-title{font-family:Georgia,"Times New Roman",serif;font-size:21px;color:#f4e6cc;letter-spacing:.02em;opacity:0;transform:translateY(6px);animation:fsCompIn .6s ease-out .48s forwards}
.lwl-fireside .fs-complete-sub{font-size:12.5px;color:var(--fs-accent-2);letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:translateY(6px);animation:fsCompIn .6s ease-out .66s forwards}
.lwl-fireside .fs-replay{margin-top:8px;background:rgba(244,217,168,.14);border:.5px solid rgba(244,217,168,.5);color:var(--fs-accent-2);border-radius:20px;padding:8px 22px;font-size:13px;cursor:pointer;opacity:0;transform:translateY(6px);animation:fsCompIn .6s ease-out .86s forwards}
.lwl-fireside .fs-replay:hover{background:rgba(244,217,168,.26)}
@keyframes fsCompIn{to{opacity:1;transform:none}}
/* completion ambience: gentle golden bloom, both characters lit, warmer box */
.lwl-fireside.fs-ended .fs-char{filter:none!important;opacity:1!important}
.lwl-fireside.fs-ended .fs-char .fs-glow{opacity:1}
.lwl-fireside.fs-ended .fs-box{background:linear-gradient(175deg,rgba(60,42,20,.95),rgba(34,22,10,.96))}
.lwl-fireside.fs-ended .fs-bloom{animation:fsBloom 1.6s ease-out forwards}
.is-reduced .fs-seal-ring,.is-reduced .fs-seal-check,.is-reduced .fs-complete-title,.is-reduced .fs-complete-sub,.is-reduced .fs-replay{animation:none!important;opacity:1;stroke-dashoffset:0;transform:none}

/* ── Stage 2: the grammar whiteboard (stageType:"whiteboard") ─────────────────
   Same cast/dialogue/box; the painted room is swapped for a drawable board that
   the engine writes on as beats advance. Dedicated to the ES→EN contrast. */
.lwl-fireside.fs-whiteboard .fs-bg{background:linear-gradient(180deg,#43372c,#241d17)!important;animation:none;filter:none}
.lwl-fireside.fs-whiteboard .fs-shaft,.lwl-fireside.fs-whiteboard .fs-motes,.lwl-fireside.fs-whiteboard .fs-fire{display:none}
/* board = a whiteboard EASEL standing BETWEEN the two speakers (not full-bleed) */
.lwl-fireside .fs-board{position:absolute;top:52px;left:50%;transform:translateX(-50%);width:min(520px,46%);bottom:198px;z-index:5;border-radius:10px;background:repeating-linear-gradient(180deg,rgba(120,100,60,0) 0,rgba(120,100,60,0) 33px,rgba(120,100,60,.055) 33px,rgba(120,100,60,.055) 34px),linear-gradient(180deg,#fbf9f1,#f3f0e5);border:1px solid #cabfa6;box-shadow:0 18px 40px rgba(0,0,0,.55),inset 0 0 0 6px #fff,inset 0 0 26px rgba(120,100,60,.10);opacity:0;transition:opacity .5s ease}
/* the easel ledge/tray under the board */
.lwl-fireside .fs-board::after{content:"";position:absolute;left:-5%;right:-5%;bottom:-11px;height:11px;background:linear-gradient(#cdc3ab,#a89a7d);border-radius:0 0 4px 4px;box-shadow:0 5px 10px rgba(0,0,0,.45)}
/* two marker pens resting on the tray — a little life on the easel */
.lwl-fireside .fs-board::before{content:"";position:absolute;z-index:6;bottom:-9px;left:13%;width:112px;height:8px;transform:rotate(-1.4deg);border-radius:3px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));background:linear-gradient(90deg,#b4532f 0 44px,transparent 44px) 0 0/62px 8px no-repeat,linear-gradient(90deg,#1f6f7a 0 44px,transparent 44px) 62px 0/62px 8px no-repeat}
.lwl-fireside.fs-whiteboard .fs-char.is-dim .fs-glow{opacity:.5}
.lwl-fireside.is-open .fs-board{opacity:1}
.lwl-fireside .fs-board-surface{position:absolute;inset:16px}
.lwl-fireside .fs-board-items{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;padding:24px 26px;overflow:hidden}
.lwl-fireside .fs-board-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:4}
/* written lines (handwriting, left-to-right reveal) */
.lwl-fireside .fs-board-item{position:absolute;font-family:"Bradley Hand","Segoe Print","Comic Sans MS",cursive;font-size:19.5px;line-height:1.42;color:#2b3540;max-width:86%;clip-path:inset(0 100% 0 0)}
.lwl-fireside .fs-board-item.is-drawn{clip-path:inset(0 0 0 0);transition:clip-path .55s ease}
.lwl-fireside .fs-board-item.at-top{top:5%;left:50%;transform:translateX(-50%);text-align:center}
.lwl-fireside .fs-board-item.at-mid{top:38%;left:50%;transform:translateX(-50%);text-align:center}
.lwl-fireside .fs-board-item.at-left{top:42%;left:5%;transform:translateY(-50%);max-width:42%}
.lwl-fireside .fs-board-item.at-right{top:42%;right:5%;transform:translateY(-50%);max-width:42%;text-align:right}
/* Flow layout override (2026-07-17): the absolute at-top/mid/left/right zones let long
   items overlap and run off the board. Stack every item as a centered, wrapping flow block
   inside the board so content is always contained. Arrows/links still measure live rects. */
.lwl-fireside .fs-board-item,
.lwl-fireside .fs-board-item.at-top,
.lwl-fireside .fs-board-item.at-mid,
.lwl-fireside .fs-board-item.at-left,
.lwl-fireside .fs-board-item.at-right{position:relative;top:auto;left:auto;right:auto;bottom:auto;transform:none;max-width:100%;text-align:center}
.lwl-fireside .fs-board-item.at-rule{position:relative;top:auto;left:auto;right:auto;bottom:auto;transform:none;max-width:100%;margin-top:6px}
.lwl-fireside .fs-board-item.style-es{color:#b4532f;text-decoration:underline;text-decoration-color:rgba(180,83,47,.36);text-decoration-thickness:2px;text-underline-offset:5px}
.lwl-fireside .fs-board-item.style-en{color:#1f6f7a;text-decoration:underline;text-decoration-color:rgba(31,111,122,.36);text-decoration-thickness:2px;text-underline-offset:5px}
.lwl-fireside .fs-board-item.style-agree{color:#2e8b57;text-decoration:underline;text-decoration-color:rgba(46,139,87,.4);text-decoration-thickness:2px;text-underline-offset:5px}
/* arrow (interference / transformation) + link (agreement bridge) as inline annotation chips
   woven between the two lines — legible, and never crossing over the handwriting */
.lwl-fireside .fs-board-anno{align-self:center;display:inline-flex;align-items:center;gap:7px;margin:1px 0;font:600 13px Georgia,"Times New Roman",serif;padding:5px 14px;border-radius:999px;max-width:96%;opacity:0;transform:translateY(-5px);transition:opacity .45s ease,transform .45s ease}
.lwl-fireside .fs-board-anno.is-in{opacity:1;transform:none}
.lwl-fireside .fs-board-anno .fs-anno-ic{font-size:15px;line-height:1}
.lwl-fireside .fs-board-anno .fs-anno-tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lwl-fireside .fs-board-anno--arrow{background:rgba(196,123,30,.15);color:#9a6417;border:1px solid rgba(196,123,30,.34)}
.lwl-fireside .fs-board-anno--link{background:rgba(46,139,87,.15);color:#256b43;border:1px solid rgba(46,139,87,.36)}
.lwl-fireside.is-reduced .fs-board-anno{opacity:1;transform:none;transition:none}
/* highlighter swipe behind a word (or the whole line) */
.lwl-fireside .fs-hl,.lwl-fireside .fs-board-item.fs-hl-all{background:linear-gradient(transparent 58%,#ffe08a 58%);padding:0 2px;border-radius:2px}
/* animated strike-through */
.lwl-fireside .fs-board-item.is-struck{color:#9a3b2a;text-decoration:none}
.lwl-fireside .fs-board-item.is-struck::after{content:"";position:absolute;left:-1%;top:52%;height:3px;width:0;background:#c0392b;border-radius:2px;transform:rotate(-1.4deg);animation:fsBoardStrike .5s ease forwards}
@keyframes fsBoardStrike{to{width:102%}}
/* the rule card — the takeaway, boxed like a highlighted note */
.lwl-fireside .fs-board-item.at-rule{text-align:center;font-family:Georgia,"Times New Roman",serif;font-size:13.5px;line-height:1.5;color:#4a3d22;background:linear-gradient(180deg,#fdf7e6,#f9efd2);border:1.5px solid #dcb85a;border-radius:10px;padding:10px 17px;max-width:94%;box-shadow:0 7px 20px rgba(0,0,0,.16)}
/* mapping arrows */
.lwl-fireside .fs-board-arrow{fill:none;stroke:#c47b1e;stroke-width:2.4;stroke-linecap:round}
.lwl-fireside .fs-board-arrow-label{fill:#8a5a1e;font:600 12.5px Georgia,"Times New Roman",serif}
/* cast: the two speakers stand at full size on EITHER SIDE of the easel */
.lwl-fireside.fs-whiteboard .fs-chars{top:56px;bottom:150px;align-items:flex-end;padding:0 2.5%;z-index:3;pointer-events:none}
.lwl-fireside.fs-whiteboard .fs-char-name{display:none}
.lwl-fireside.fs-whiteboard .fs-art svg{width:196px}
/* both speakers stay clearly visible; the inactive one only softly recedes so it's
   obvious who's talking without losing them into the dark backdrop */
.lwl-fireside.fs-whiteboard .fs-char.is-dim{filter:grayscale(.25) brightness(.82);opacity:.9}
.lwl-fireside.fs-whiteboard .fs-char.is-active{filter:none;opacity:1}
.lwl-fireside.fs-whiteboard .fs-glow{background:radial-gradient(60% 55% at 50% 45%,rgba(255,210,140,.42),transparent 70%)}
/* reduce-fx: instant, no reveal/animation */
.lwl-fireside.is-reduced .fs-board{opacity:1;transition:none}
.lwl-fireside.is-reduced .fs-board-item{clip-path:none!important;transition:none!important}
.lwl-fireside.is-reduced .fs-board-item.is-struck::after{animation:none;width:100%}
.lwl-fireside.is-reduced .fs-board-arrow{stroke-dasharray:none!important;stroke-dashoffset:0!important}
/* path-hosted whiteboard: speakers span the wider console, easel stays centred */
.lwl-path-lesson--fireside .fs-whiteboard .fs-chars{left:50%;right:auto;transform:translateX(-50%);width:min(1180px,94%);padding:0 2%}
.lwl-path-lesson--fireside .fs-whiteboard .fs-art svg{width:250px}
.lwl-path-lesson--fireside .fs-board{width:min(560px,46%)}
@media (max-width:640px){
	.lwl-fireside .fs-board{top:48px;width:min(360px,54%);bottom:196px}
	.lwl-fireside .fs-board-item{font-size:13px}
	.lwl-fireside .fs-board-item.at-rule{font-size:11px}
	.lwl-fireside.fs-whiteboard .fs-art svg{width:104px}
	.lwl-fireside.fs-whiteboard .fs-chars{padding:0 0.5%}
}