/* emm.css: Can You Force It? (emm-app.js). Built on the site's tokens (site.css) and the arcade entry screen (arcade.css),
   so it reads as the same arcade in both tones. One stage, few containers: a small chapter title, one sentence, the player
   key, one central picture, one row of actions, and a fixed bar with Previous, Continue and Chapters. Fine branches,
   restrained player marks, and one gold mark: the focus. Every rule is scoped. */
#emmGame,#emmSetup{--em-gold:color-mix(in srgb,#c9a63f 72%,var(--fg))}

/* ---------- entrance ---------- */
#emmSetup .em-entry{display:flex;align-items:flex-end;justify-content:center;gap:clamp(8px,2vw,24px)}
#emmSetup .em-entry .em-duck{width:clamp(64px,8vw,104px)}
#emmSetup .em-ebd{width:min(300px,56vw);display:flex;flex-direction:column;gap:8px}
#emmSetup .em-ebd svg{display:block;width:100%;height:auto;color:var(--fg)}
@media (max-width:900px){#emmSetup.entry.show{grid-template-areas:"head" "demo" "ctl"}}

/* ---------- ducks and marks ---------- */
.em-duck{display:inline-block;flex:none;line-height:0}
.em-duck svg{width:100%;height:auto;display:block}
.em-duck.flip svg{transform:scaleX(-1)}
.em-sym{display:inline-block;vertical-align:-3px;color:var(--fg);flex:none}

/* ---------- page frame ---------- */
#emmGame{display:none}
#emmGame.show{display:block}
html.em-navon{scroll-padding-bottom:96px}
html.em-navon body{padding-bottom:88px}
.em{max-width:1040px;margin:0 auto;padding:4px 0 24px}
.em-main{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}

/* one sentence at a time */
.em-top{max-width:720px;display:flex;flex-direction:column;align-items:center;gap:4px}
.em-chap{margin:0;font:600 14px/1.3 var(--font-sans);color:var(--g6)}
.em-part{margin:0;font:600 12px/1.3 var(--font-mono);color:var(--g5);letter-spacing:.02em;min-height:16px}
.em-say{margin:6px 0 0;font:600 clamp(19px,2.1vw,24px)/1.35 var(--font-sans);color:var(--fg);min-height:2.7em;display:flex;align-items:center;justify-content:center;text-wrap:balance}
.em-fb{margin:0;font:500 15px/1.45 var(--font-sans);color:var(--g6);max-width:640px}
.em-fb.bad{color:var(--fg);font-weight:600}
.em-fb.bad::before{content:'';display:inline-block;width:3px;height:1em;margin-right:8px;vertical-align:-2px;background:var(--fg);border-radius:2px}

/* the player key: the duck to move is highlighted, the other dimmed */
.em-key{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 22px}
.em-k{display:inline-flex;align-items:center;gap:8px;padding:2px 10px 2px 2px;border-radius:999px;transition:opacity .2s}
.em-k .em-duck{width:38px}
.em-kt{font:500 14px/1.25 var(--font-sans);color:var(--g6);text-align:left}
.em-kt b{color:var(--fg);font-weight:700}
.em-kt em{font-style:normal;margin-left:8px;padding:1px 8px;border-radius:999px;background:var(--fg);color:var(--bg);font:700 12px/1.5 var(--font-sans)}
.em-k.on .em-kt{color:var(--fg)}
.em-k.off{opacity:.38}
.em-over{font:600 13.5px var(--font-sans);color:var(--fg);padding:3px 10px;border:1.5px solid var(--fg);border-radius:999px}
@media (max-width:560px){.em-key{gap:4px 12px}.em-k .em-duck{width:30px}.em-kt{font-size:12.5px}.em-kt em{margin-left:4px;padding:0 6px}}

/* the stage */
.em-stage{position:relative;width:100%;min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.em-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-height:46px;width:100%}
.em-opts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.em-opts.col{flex-direction:column;align-items:stretch;width:min(460px,100%)}
.em-opts.nums .em-btn{min-width:64px;font:700 18px var(--font-mono)}
.em-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border-radius:12px;border:1px solid var(--g4);background:transparent;color:var(--fg);font:600 15px/1.2 var(--font-sans);cursor:pointer;text-decoration:none;text-align:center}
.em-btn:hover{border-color:var(--fg)}
.em-btn.pri{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.em-btn:disabled{opacity:.4;cursor:default}
.em-btn:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.em-sub{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px}
.em-lnk{min-height:40px;padding:0 4px;border:none;background:transparent;color:var(--g6);font:600 14px var(--font-sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.em-lnk:hover,.em-lnk[aria-expanded="true"]{color:var(--fg)}
.em-lnk:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.em-why{max-width:660px;text-align:left;font:500 15px/1.6 var(--font-sans);color:var(--g6)}
.em-why p{margin:0 0 10px}.em-why p:last-child{margin:0}
.em-why b{color:var(--fg);font-family:var(--font-mono);font-size:14.5px;font-weight:600}
.em-credit{margin:6px 0 0;font:500 13px/1.5 var(--font-sans);color:var(--g5)}
.em-credit a{color:var(--g6);text-decoration:underline}
.em-cap{margin:0;font:500 14px/1.45 var(--font-sans);color:var(--g6);max-width:560px}

/* ---------- boards ---------- */
.em-play{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.em-bigb{width:min(330px,82vw)}
.em-bsvg{display:block;width:100%;height:auto;color:var(--fg);overflow:visible;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.em-bsvg.mid{width:min(230px,60vw)}
.em-coord{font:600 12px var(--font-mono);fill:var(--g5)}
.em-hit{fill:transparent;cursor:pointer}
.em-legal{fill:none;stroke:currentColor;stroke-opacity:.32;stroke-width:1.4;pointer-events:none}
.em-ghost{fill:currentColor;fill-opacity:.16;stroke:currentColor;stroke-width:3;stroke-dasharray:6 4;pointer-events:none}
.em-ghost-H{fill-opacity:.06}
.em-new{animation:emPop .38s ease-out;transform-box:fill-box;transform-origin:center}
@keyframes emPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.em-place{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;min-height:0}
.em-place:empty{display:none}
.em-rules{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;max-width:760px}
.em-rules li{display:flex;align-items:center;gap:10px;font:600 15px/1.35 var(--font-sans);color:var(--fg);text-align:left;max-width:260px}
.em-rules li.new{animation:emIn .45s ease-out}
.em-rules svg{width:46px;height:46px;flex:none;color:var(--fg)}
@keyframes emIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.em-bridge{display:flex;align-items:center;justify-content:center;gap:clamp(10px,3vw,36px);flex-wrap:wrap}
.em-bridge figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.em-bridge figure .em-bsvg{width:min(300px,70vw)}
.em-bridge figure .em-bsvg.small{width:min(170px,40vw);opacity:.55}
.em-bridge figcaption{font:500 13.5px var(--font-sans);color:var(--g6)}
.em-barr{font:600 28px var(--font-sans);color:var(--g5)}
.em-three{display:flex;align-items:center;justify-content:center;gap:clamp(16px,4vw,44px);flex-wrap:wrap}
.em-facts{margin:0;display:flex;flex-direction:column;gap:10px;text-align:left;transition:opacity .3s}
.em-facts.hide{opacity:0}
.em-facts div{display:flex;flex-direction:column;gap:1px}
.em-facts dt{font:600 12px var(--font-mono);color:var(--g5)}
.em-facts dd{margin:0;font:700 17px var(--font-sans);color:var(--fg);display:flex;align-items:center;gap:6px}

/* ---------- the tree picture ---------- */
.em-tr{width:100%;display:flex;justify-content:center}
.em-scene{display:block;max-width:100%;height:auto;color:var(--fg);overflow:visible}
.em-map{position:absolute;bottom:0;right:0;margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.em-map svg{display:block;width:120px;height:auto}
.em-map line{stroke:var(--g4);stroke-width:.8}
.em-map line.in{stroke:var(--fg);stroke-width:1.3}
.em-map circle{fill:var(--g4)}
.em-map circle.in{fill:var(--fg)}
.em-map circle.foc{fill:none;stroke:var(--em-gold);stroke-width:1.6}
.em-map figcaption{font:500 11px var(--font-sans);color:var(--g5)}
@media (max-width:980px){.em-map{position:static;align-self:flex-end;margin-top:-4px}.em-map svg{width:96px}}
.em-dl{font:700 12px var(--font-sans);fill:var(--g5)}
.em-dlg.on .em-dl{fill:var(--fg)}
.em-band{fill:var(--surf3);opacity:.75}
.em-edge{fill:none;stroke:var(--g5);stroke-width:1.6;transition:opacity .2s}
.em-edge.on{stroke:var(--fg);stroke-width:4}
.em-edge.all{stroke:var(--fg);stroke-width:3;stroke-dasharray:7 4}
.em-edge.dim,.em-node.dim{opacity:.22}
.em-node{outline:none}
.em-node.choice,.em-node[role="button"]{cursor:pointer}
.em-nbg{fill:var(--bg);stroke:var(--g3);stroke-width:1}
.em-node.choice:hover .em-nbg{fill:var(--surf3)}
.em-nbg.reg{fill:url(#emHatch);stroke:var(--g5)}
.em-nbg.reg.fade{animation:emFade .5s ease-out}
.em-node:focus-visible .em-nbg{stroke:var(--fg);stroke-width:2.4}
.em-focr{fill:none;stroke:var(--em-gold);stroke-width:3.4}
.em-hlr{fill:none;stroke:var(--fg);stroke-width:1.8;stroke-dasharray:5 4}
.em-node.bad .em-hlr{stroke-width:3.2;stroke-dasharray:none}
.em-node.bad{animation:emShake .4s}
.em-slot{fill:none;stroke:var(--g4);stroke-width:1.4;stroke-dasharray:4 4}
@keyframes emShake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@keyframes emFade{from{opacity:0}to{opacity:1}}
.em-grow{animation:emGrow .55s ease-out both}
.em-node.em-grow{animation-delay:.35s}
@keyframes emGrow{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.em-collapse{animation:emCol .52s ease-in forwards;transform-box:view-box}
@keyframes emCol{to{opacity:0;transform:translateY(-30px) scale(.9)}}
.em-fold{fill:var(--surf2);stroke:var(--g4);stroke-width:1}
.em-fsize{font:600 11.5px var(--font-sans);fill:var(--g6)}
.em-tag rect{stroke:var(--fg);stroke-width:1.5}
.em-tag text{font:700 12px var(--font-sans)}
.em-tag-V rect{fill:var(--fg)}.em-tag-V text{fill:var(--bg)}
.em-tag-H rect{fill:var(--bg)}.em-tag-H text{fill:var(--fg)}
.em-tag-q rect{fill:var(--bg);stroke:var(--g4);stroke-dasharray:3 2}.em-tag-q text{fill:var(--g5)}
.em-tag-n rect{fill:var(--bg)}.em-tag-n text{fill:var(--fg);font:700 13px var(--font-mono)}
.em-tag-n.none rect{stroke:var(--g4)}.em-tag-n.none text{fill:var(--g5)}
.em-tag-x rect{fill:var(--bg);stroke:var(--g5)}.em-tag-x text{fill:var(--fg);font-size:11.5px}
.em-tag-x.ok rect{stroke:var(--fg)}
.em-legend{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 18px;font:500 13px var(--font-sans);color:var(--g6)}
.em-legend span{display:inline-flex;align-items:center;gap:6px}
.em-legend i{display:inline-flex;align-items:center;justify-content:center;font-style:normal;flex:none}
.em-lg-t{min-width:24px;height:18px;padding:0 6px;border-radius:9px;background:var(--fg);color:var(--bg);font:700 11px var(--font-sans)}
.em-lg-t.q{background:transparent;color:var(--g5);border:1.5px dashed var(--g4)}
.em-lg-n{min-width:24px;height:18px;border:1.5px solid var(--fg);border-radius:5px;font:700 11px var(--font-mono);color:var(--fg)}
.em-lg-r svg{display:block;width:22px;height:14px;color:var(--fg)}
.em-lg-on{width:22px;height:0;border-top:4px solid var(--fg)}
.em-lg-all{width:22px;height:0;border-top:3px dashed var(--fg)}
.em-flipc{position:fixed;z-index:60;pointer-events:none;transform-origin:center;color:var(--fg)}
.em-flipc svg{display:block;width:100%;height:100%}

/* ---------- induction: sizes ---------- */
.em-bars{list-style:none;margin:0;padding:0;width:min(560px,100%);display:flex;flex-direction:column;gap:10px}
.em-bars li{display:grid;grid-template-columns:130px 1fr 34px;align-items:center;gap:10px;text-align:left;font:500 14px var(--font-sans);color:var(--g6)}
.em-bars b{font:700 15px var(--font-mono);color:var(--fg);text-align:right}
.em-bb{height:14px;border-radius:7px;background:var(--surf3);overflow:hidden}
.em-bb i{display:block;height:100%;background:var(--fg);border-radius:7px}
@media (max-width:560px){.em-bars li{grid-template-columns:96px 1fr 28px;font-size:13px}}

/* ---------- De Morgan ---------- */
.em-claim{margin:0;font:600 17px/1.4 var(--font-sans);color:var(--fg)}
.em-claim.fail{text-decoration:line-through;text-decoration-thickness:2px;color:var(--g6)}
.em-tiles{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 4px;max-width:880px}
.em-tg{display:inline-flex;align-items:center;gap:5px}
.em-tile{padding:7px 11px;border:1.5px solid var(--g4);border-radius:10px;font:600 14.5px/1.25 var(--font-sans);color:var(--g6)}
.em-tile.flip{border-color:var(--fg);color:var(--fg)}
.em-tile.band{background:var(--surf3)}
.em-tile.new{animation:emFlip .5s ease-out}
@keyframes emFlip{0%{transform:rotateX(90deg)}100%{transform:none}}
.em-not{padding:7px 9px;border-radius:8px;background:var(--fg);color:var(--bg);font:700 12.5px var(--font-mono);letter-spacing:.04em}
.em-arr{color:var(--g5);font-size:15px}
.em-tnote{margin:0;font:500 13px var(--font-sans);color:var(--g5)}

/* ---------- game values ---------- */
.em-count{margin:0;display:flex;align-items:center;justify-content:center;gap:10px;font:700 26px var(--font-mono);color:var(--g5)}
.em-count span.now{color:var(--fg)}
.em-count i{font-style:normal;font-size:18px}
.em-count.big{font-size:clamp(34px,6vw,54px)}

/* ---------- the end ---------- */
.em-endl{list-style:none;margin:0;padding:0;width:min(680px,100%);display:flex;flex-direction:column;counter-reset:em}
.em-endl li{counter-increment:em;border-top:1px solid var(--g3)}
.em-endl li:last-child{border-bottom:1px solid var(--g3)}
.em-endl button{display:grid;grid-template-columns:28px 1fr;gap:2px 10px;width:100%;padding:12px 4px;border:none;background:transparent;color:var(--fg);text-align:left;cursor:pointer}
.em-endl button::before{content:counter(em);grid-row:span 2;font:600 13px var(--font-mono);color:var(--g5);padding-top:2px}
.em-endl b{font:700 15.5px/1.3 var(--font-sans)}
.em-endl span{font:500 14px/1.4 var(--font-sans);color:var(--g6)}
.em-endl button:hover{background:var(--surf2)}

/* ---------- explore freely ---------- */
.em-exbar{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px}
.em-seg{display:inline-flex;padding:3px;border:1px solid var(--g3);border-radius:999px}
.em-seg button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:none;border-radius:999px;background:transparent;color:var(--g6);font:600 13.5px var(--font-sans);cursor:pointer}
.em-seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.em-seg button[aria-pressed="true"] .em-sym{color:var(--bg)}
.em-seg button[aria-pressed="true"] .em-sym rect[stroke]{fill:var(--fg);stroke:var(--bg)}
.em-seg button:focus-visible{outline:2px solid var(--fg);outline-offset:1px}
.em-exgrid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px;width:100%;align-items:start}
.em-extree{min-width:0;display:flex;flex-direction:column;gap:8px}
.em-extree.expand .em-exsc{overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.em-extree.expand .em-scene{max-width:none}
.em-expos{position:sticky;top:84px;display:flex;flex-direction:column;align-items:center;gap:12px}
.em-expos .em-key{flex-direction:column;align-items:flex-start}
.em-node.sel .em-nbg{fill:var(--surf3)}
@media (max-width:860px){.em-exgrid{grid-template-columns:minmax(0,1fr)}.em-expos{position:static}}

/* ---------- the bar: always on screen ---------- */
.em-nav{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--bg);border-top:1px solid var(--g3);padding:10px 5vw max(10px,env(safe-area-inset-bottom))}
.em-navin{position:relative;max-width:1040px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px}
.em-navc{display:flex;align-items:center;gap:8px}
.em-navb{min-height:46px;padding:0 16px;border:1px solid var(--g4);border-radius:12px;background:transparent;color:var(--fg);font:600 14.5px var(--font-sans);cursor:pointer;white-space:nowrap}
.em-navb:hover:not(:disabled){border-color:var(--fg)}
.em-navb.pri{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.em-navb:disabled{opacity:.35;cursor:default}
.em-navb:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.em-navb[aria-expanded="true"]{border-color:var(--fg);background:var(--surf3)}
.em-step{display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center;font:500 12px var(--font-mono);color:var(--g5)}
.em-step b{font:700 13.5px var(--font-sans);color:var(--fg)}
.em-chl{position:absolute;left:0;bottom:calc(100% + 12px);width:min(440px,calc(100vw - 24px));display:flex;flex-direction:column;gap:2px;padding:6px;background:var(--bg);border:1px solid var(--g3);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.26)}
.em-chl button{display:flex;align-items:center;gap:10px;min-height:46px;padding:6px 10px;border:none;border-radius:10px;background:transparent;color:var(--fg);font:600 14.5px/1.3 var(--font-sans);text-align:left;cursor:pointer}
.em-chl button:hover{background:var(--surf2)}
.em-chl button.on{background:var(--surf3)}
.em-chn{flex:none;width:20px;font:600 12px var(--font-mono);color:var(--g5)}
.em-tick{margin-left:auto;font-size:15px}
@media (max-width:560px){.em-nav{padding-left:12px;padding-right:12px}.em-navb{padding:0 12px}.em-pt{display:none}.em-navc{gap:6px}.em-step b{font-size:12.5px}.em-step{font-size:11px}}

@media (prefers-reduced-motion:reduce){.em-new,.em-node.bad,.em-tile.new,.em-rules li.new,.em-grow,.em-collapse,.em-nbg.reg.fade{animation:none}}