/* Lesson 4 · three enemies diagram + lies-vs-truth battle */
.e4-stage{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#1c2a48;box-shadow:0 10px 30px rgba(14,27,46,.25)}
.e4-stage svg{width:100%;height:100%;display:block}
.e4-en{cursor:pointer;transition:transform 1s cubic-bezier(.34,1.56,.64,1),opacity .6s;opacity:.55;transform-box:fill-box;transform-origin:50% 100%}
.e4-en:hover{opacity:.85}
.e4-stage[data-on="world"] .e4-en[data-e="world"],.e4-stage[data-on="devil"] .e4-en[data-e="devil"],.e4-stage[data-on="self"] .e4-en[data-e="self"]{opacity:1}
.e4-stage[data-on="world"] .e4-en[data-e="world"]{transform:translateX(150px) scale(1.08)}
.e4-stage[data-on="devil"] .e4-en[data-e="devil"]{transform:translateX(-160px) scale(1.08)}
.e4-stage[data-on="self"] .e4-en[data-e="self"]{transform:scale(1.25)}
.e4-stage[data-on="all"] .e4-en{opacity:1}
.e4-stage[data-on="all"] .e4-en[data-e="world"]{transform:translateX(230px) scale(1.1)}
.e4-stage[data-on="all"] .e4-en[data-e="devil"]{transform:translateX(-240px) scale(1.1)}
.e4-stage[data-on="all"] .e4-en[data-e="self"]{transform:scale(1.35)}
.e4-stage[data-on="win"] .e4-en{opacity:.12;transition:transform 1.4s ease,opacity 1.4s}
.e4-stage[data-on="win"] .e4-en[data-e="world"]{transform:translateX(-220px) scale(.8)}
.e4-stage[data-on="win"] .e4-en[data-e="devil"]{transform:translateX(240px) scale(.8)}
.e4-stage[data-on="win"] .e4-en[data-e="self"]{transform:scale(.6)}
.e4-final{opacity:0;transition:opacity 1.4s}
.e4-stage[data-on="win"] .e4-final{opacity:1}
.e4-stage[data-on="all"] .e4-girl{animation:e4Shake .5s 3}
@keyframes e4Shake{25%{transform:translate(796px,800px) scale(1.6)}75%{transform:translate(804px,800px) scale(1.6)}}
.e4-pull{animation:e4Dash 1.2s linear infinite}
@keyframes e4Dash{to{stroke-dashoffset:-36}}
.e4-blink{animation:e4Blink 3s infinite}
@keyframes e4Blink{48%,52%{opacity:.2}}
.e4-grab{animation:e4Grab 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes e4Grab{50%{transform:scaleY(1.12)}}
.e4-hot{position:absolute;transform:translate(-50%,-50%);border:2px solid rgba(255,255,255,.7);background:rgba(14,27,46,.72);color:#fff;font:inherit;font-size:clamp(11px,1.5vw,14px);font-weight:800;padding:6px 12px;border-radius:99px;cursor:pointer;animation:e4Hot 2s infinite;z-index:3}
.e4-hot.on{background:#fff;color:var(--ink);animation:none}
.e4-hot.seen:after{content:' ✓';color:#7fe0a7}
@keyframes e4Hot{50%{box-shadow:0 0 0 8px rgba(255,255,255,.18)}}
.e4-hint{position:absolute;left:50%;top:12px;transform:translateX(-50%);background:rgba(255,255,255,.88);color:var(--ink);font-size:12px;font-weight:700;padding:4px 12px;border-radius:99px;white-space:nowrap}
.e4-bubbles{position:absolute;inset:0;pointer-events:none;z-index:2}
.e4-bub{position:absolute;transform:translate(-50%,-50%);max-width:30%;background:#fff;border:3px solid var(--c);border-radius:16px;padding:6px 10px;font-size:clamp(11px,1.5vw,14px);font-weight:700;color:var(--ink);box-shadow:0 6px 16px rgba(0,0,0,.3);opacity:0;animation:e4Pop .5s cubic-bezier(.34,1.56,.64,1) forwards}
.e4-bub.win{max-width:70%;font-size:clamp(13px,2vw,20px);background:#FFF6DD}
@keyframes e4Pop{from{opacity:0;transform:translate(-50%,-30%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.e4-panel{margin-top:10px}
.e4-card{background:#fff;border:2px solid var(--c);border-radius:14px;padding:10px 14px}
.e4-card h4{margin:0 0 4px;color:var(--c);font-size:15px}
.e4-stand{font-size:13.5px;margin:6px 0}
.e4-slider{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft);margin:6px 0}
.e4-slider input{flex:1;min-width:140px}
.e4-more{font-size:12px;color:var(--ink-soft);margin:4px 0 0}
/* battle */
.lb-stage{position:relative;height:500px;border-radius:18px;overflow:hidden;background:radial-gradient(ellipse at 40% 30%,#2c2450,#0e1b2e 70%)}
.lb-3d{position:absolute;left:0;top:0;bottom:0;width:62%}
.lb-hud{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;z-index:3;color:#fff;font-weight:800;font-family:var(--disp)}
.lb-hud span{background:rgba(14,27,46,.6);padding:4px 12px;border-radius:99px}
.lb-lie{position:absolute;top:34%;left:100%;width:min(300px,42%);transform:translate(-10%,-50%);background:linear-gradient(135deg,#3a0f22,#1c0a2a);border:2px solid #ff4d6d;color:#ffd6de;border-radius:16px;padding:10px 12px;font-size:13.5px;font-weight:700;box-shadow:0 0 22px rgba(255,77,109,.55);opacity:0;z-index:2}
.lb-lie b{display:block;color:#ff8fa3;font-size:11.5px}
.lb-lie.on{opacity:1}
.lb-lie.shatter{animation:lbShatter .7s forwards}
@keyframes lbShatter{40%{transform:translate(-10%,-50%) scale(1.15) rotate(-4deg);filter:brightness(2)}100%{transform:translate(-10%,-50%) scale(.2) rotate(30deg);opacity:0}}
.lb-lie.hit{animation:lbHit .6s forwards}
@keyframes lbHit{to{left:40%;opacity:0;transform:translate(-50%,-50%) scale(.4)}}
.lb-flash{position:absolute;inset:0;background:rgba(255,40,70,.0);pointer-events:none;transition:background .3s;z-index:1}
.lb-stage.flash .lb-flash{background:rgba(255,40,70,.28)}
.lb-start{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(14,27,46,.55);color:#fff;text-align:center;padding:20px;z-index:4}
.lb-start p{max-width:420px;font-size:13.5px;margin:0}
.lb-load{position:absolute;left:0;top:0;bottom:0;width:62%;display:flex;align-items:center;justify-content:center;color:#cdd9e6;font-size:13px}
.lb-choices{display:grid;gap:8px;margin-top:10px}
.lb-q{margin:0;font-weight:800;font-size:14px}
.lb-opt{border:2px solid var(--line);background:#fff;border-radius:14px;padding:10px 12px;font:inherit;font-size:13.5px;text-align:left;cursor:pointer;line-height:1.5}
.lb-opt b{display:block;color:var(--gold-2);font-size:12px}
.lb-opt:hover{border-color:var(--gold)}
.lb-opt.ok{background:linear-gradient(135deg,#FFF6DD,#FBE7AE);border-color:var(--gold-2)}
.lb-opt.no{background:var(--clay-bg);border-color:var(--clay);animation:shake .4s}
.lb-res{margin-top:10px;background:#fff;border:2px solid var(--gold);border-radius:14px;padding:10px 14px}
.lb-res.no{border-color:var(--clay)}
.lb-res .btn{margin-top:8px}
@media (max-width:760px){.lb-stage{height:440px}.lb-3d,.lb-load{width:100%}.lb-lie{top:20%;width:60%}.e4-stage{aspect-ratio:4/3}.e4-bub{max-width:44%}}