/* Exfil missions: a room, a hand and a tree, in white ink. Luke Steuber. */
@font-face{font-family:"Plex Mono";src:url("fonts/IBMPlexMono-500.woff2") format("woff2");font-weight:500;font-display:swap}@font-face{font-family:"Plex Sans";src:url("fonts/IBMPlexSans-400.woff2") format("woff2");font-weight:400;font-display:swap}
:root{color-scheme:dark;--bg:#000;--ink:#fff;--text:#ededed;--sub:#a6a6a6;--line:#2f2f2f;--frame:#ededed;--band:rgba(255,255,255,.16);--guide:#333;--known:#2c2c2c;--scrim:rgba(0,0,0,.8);--mono:"Plex Mono",monospace;--sans:"Plex Sans",sans-serif}
:root[data-theme=light]{color-scheme:light;--bg:#fff;--ink:#000;--text:#111;--sub:#5e5e5e;--line:#d4d4d4;--frame:#1c1c1c;--band:rgba(0,0,0,.1);--guide:#ccc;--known:#dcdcdc;--scrim:rgba(255,255,255,.84)}
@media(prefers-color-scheme:light){:root[data-theme=system]{color-scheme:light;--bg:#fff;--ink:#000;--text:#111;--sub:#5e5e5e;--line:#d4d4d4;--frame:#1c1c1c;--band:rgba(0,0,0,.1);--guide:#ccc;--known:#dcdcdc;--scrim:rgba(255,255,255,.84)}}
*{box-sizing:border-box;border-radius:0}body{margin:0;height:100dvh;overflow:hidden;background:var(--bg);color:var(--text);font:16px/1.45 var(--sans);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}button,select,input{font:inherit;color:inherit}button{cursor:pointer}button:disabled{opacity:.35;cursor:default}button:focus-visible,select:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.readout{position:fixed;top:calc(max(0px,env(safe-area-inset-top)) + 14px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;font:500 13px/1 var(--mono);letter-spacing:.02em;color:var(--sub);white-space:nowrap}#marks{display:flex;gap:4px}#marks svg{width:12px;height:12px;fill:none;stroke:var(--sub);stroke-width:1.2}#marks .solid{fill:var(--ink);stroke:var(--ink)}
.title{position:fixed;top:calc(max(0px,env(safe-area-inset-top)) + 34px);left:56px;right:56px;margin:0;text-align:center;color:var(--text);font:14px/1.3 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#board-shell{position:absolute;inset:58px 12px 126px;display:flex;overflow:hidden;padding:4px}.board-stage{margin:auto;display:flex;flex-direction:column;align-items:center;gap:8px;flex:none;position:relative;padding-bottom:56px}.scene{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none}#room,#lattice{display:block;flex:none;overflow:visible}#room{pointer-events:none;outline:none}#lattice{touch-action:manipulation}.node-button{display:block;width:100%;height:100%;border:0;border-radius:50%;background:transparent;padding:0;touch-action:manipulation}.node-button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}.edge{stroke:var(--guide);stroke-width:1;fill:none}.edge.chosen{stroke:var(--ink);stroke-width:2}.node-circle{fill:var(--bg);stroke:var(--line);stroke-width:1}.node.known .node-circle{fill:var(--known)}.glyph{stroke:var(--sub);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}.glyph-text{fill:var(--sub);font:500 14px/1 var(--mono)}.node.available .node-circle{stroke:var(--ink);stroke-width:1.5}.node.available .glyph{stroke:var(--ink)}.node.available .glyph-text{fill:var(--ink)}.node.chosen .node-circle{stroke:var(--ink);fill:var(--ink)}.node.chosen .glyph{stroke:var(--bg)}.node.chosen .glyph-text{fill:var(--bg)}.mark{fill:var(--ink)}.node.chosen .mark{fill:var(--bg)}.node.refused .node-circle{stroke:var(--ink);stroke-dasharray:3 3}.hint-ring{fill:none;stroke:var(--ink);stroke-width:1.5}.hint-ring.wrong{stroke-dasharray:3 3}.frame{stroke:var(--ink);stroke-width:1.5;fill:none}.guide{fill:var(--sub);opacity:.55}.block{fill:var(--sub)}.gate{fill:none;stroke:var(--ink);stroke-width:1.5}.gate.open{stroke:var(--sub);stroke-width:1;stroke-dasharray:2 5}.papers{fill:var(--ink)}.trail{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.start-ring{fill:var(--bg);stroke:var(--ink);stroke-width:1}.dot{fill:var(--ink);stroke:var(--ink);stroke-width:1}.dot.out{fill:var(--bg);stroke-width:1}.entry{fill:var(--ink)}
/* The hand sits between the room and the tree and keeps its height when empty, so nothing moves when something is picked up. */
#held{display:flex;justify-content:center;gap:14px;height:20px;flex:none;color:var(--text);font:500 12px/20px var(--mono);white-space:nowrap}.held-item{display:inline-flex;align-items:center;gap:6px}.held-item.fresh{animation:next-reveal .3s both}.held-item svg{width:12px;height:12px;fill:none;stroke:var(--ink);stroke-width:1.4}.held-item .solid{fill:var(--ink)}
.toolbar #undo-btn.nudge{color:var(--ink);animation:undo-nudge 1.6s ease-in-out infinite}@keyframes undo-nudge{50%{transform:scale(1.18)}}
/* The story line: up to three lines above the toolbar, in room the play area leaves for it. */
#feedback{position:fixed;bottom:62px;left:16px;right:16px;max-width:34rem;max-height:56px;overflow:hidden;margin:0 auto;text-align:center;color:var(--sub);font:14px/1.3 var(--sans);pointer-events:none}#feedback b{font-weight:400;color:var(--text)}.toolbar{position:fixed;bottom:max(6px,env(safe-area-inset-bottom));left:8px;right:8px;display:flex;justify-content:space-between}.toolbar>div{display:flex}.ib{display:inline-grid;place-items:center;width:48px;height:48px;min-width:48px;min-height:48px;border:0;background:none;padding:12px;color:var(--ink);transition:opacity .15s,transform .1s}.ib svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.ib:active{transform:scale(.94)}
.toolbar .ib{color:var(--sub)}.toolbar .ib:hover,.toolbar .ib:focus-visible{color:var(--ink)}#restart-btn{position:fixed;top:max(0px,env(safe-area-inset-top));left:8px;color:var(--sub);z-index:2}#restart-btn:hover,#restart-btn:focus-visible{color:var(--ink)}
/* As in Slant and Akari, the arrow to the next mission appears right below the play area, in room the stage always keeps
   for it, so nothing moves when a mission is finished. */
.completion{position:absolute;top:calc(100% - 48px);left:0;right:0;height:48px;display:flex;justify-content:center;gap:12px;animation:next-reveal .45s .15s both}.completion[hidden]{display:none}@keyframes next-reveal{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
/* A phone on its side: the toolbar becomes a column on the right, as in the rest of the set. The room and the hand sit beside the tree,
   so the tree keeps the whole height, and the arrow to the next mission stands at the tree's right. */
.board-stage.side{flex-direction:row;gap:24px;padding:0 64px 0 0}.board-stage.side .completion{top:0;bottom:0;left:auto;right:0;width:48px;height:auto;align-items:center}
@media(orientation:landscape) and (max-height:500px){#board-shell{inset:40px 72px 40px 12px}.toolbar{left:auto;right:8px;top:12px;bottom:12px;flex-direction:column;width:48px}.toolbar>div{flex-direction:column}#feedback{left:12px;right:72px;bottom:4px;max-height:34px;font-size:12px}.readout{left:calc(50% - 32px);top:calc(max(0px,env(safe-area-inset-top)) + 8px)}.title{top:calc(max(0px,env(safe-area-inset-top)) + 23px);right:128px;font-size:12px}}
.sheet{width:min(32rem,calc(100vw - 16px));max-height:calc(100dvh - 16px);border:1px solid var(--frame);padding:0;background:var(--bg);color:var(--text)}.sheet[open]{display:flex;flex-direction:column}.sheet::backdrop{background:var(--scrim)}.sheet-head{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;gap:12px;flex:none;border-bottom:1px solid var(--line)}h2{font:500 16px/1.3 var(--mono);margin:0}.sheet-head form{margin:0}.sheet-x{width:44px;height:44px;min-width:44px;min-height:44px;padding:10px}.sheet-body{padding:20px 24px;overflow:auto;min-height:0;overscroll-behavior:contain;scroll-padding:12px}.sheet-body p{max-width:60ch;margin:0 0 16px}.row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;border-bottom:1px solid var(--line)}.row select{max-width:65%;min-height:44px;background:var(--bg);border:0;padding:4px 8px}.row button{min-height:44px;background:none;border:0;padding:8px}.row button:not(:disabled){text-decoration:underline;text-underline-offset:4px}.quiet{color:var(--sub);font:13px/1.4 var(--mono);overflow-wrap:anywhere;margin-top:8px}.sheet-foot{padding:12px 24px;border-top:1px solid var(--line);flex:none;color:var(--sub);font-size:14px}.sheet-foot a{color:inherit}#settings-feedback a{overflow-wrap:anywhere}
.text-action{min-height:44px;padding:8px 12px;border:1px solid var(--line);background:none;font:500 14px/1.3 var(--mono);color:var(--text)}.text-action:focus-visible,.sheet summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.legend{list-style:none;margin:0 0 16px;padding:0}.legend li{display:flex;align-items:center;gap:12px;min-height:40px}.legend svg{width:26px;height:26px;flex:none;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.legend text{fill:var(--ink);stroke:none;font:500 14px/1 var(--mono)}
.controls{border-top:1px solid var(--line);padding-top:16px}.controls p{margin:0 0 6px}.help-more{border-top:1px solid var(--line);margin-top:16px;padding-top:4px}.help-more summary{cursor:pointer;min-height:44px;padding:12px 0;color:var(--sub)}.help-more p{font-size:14px}.sheet-body .help-more p:last-child{margin-bottom:0}
@media(max-width:480px){.sheet-head{padding:8px 12px}.sheet-body{padding:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.toolbar #undo-btn.nudge{outline:1px solid var(--ink);outline-offset:-7px}}:root[data-motion=reduce] *,:root[data-motion=reduce] *::before,:root[data-motion=reduce] *::after{animation:none!important;transition:none!important}:root[data-motion=reduce] .toolbar #undo-btn.nudge{outline:1px solid var(--ink);outline-offset:-7px}
@media(forced-colors:active){:root,:root[data-theme]{--bg:Canvas;--ink:CanvasText;--text:CanvasText;--sub:GrayText;--line:GrayText;--guide:GrayText;--known:Canvas;--frame:CanvasText;--scrim:Canvas}#room,#lattice{forced-color-adjust:none}.toolbar .ib,#restart-btn{color:ButtonText}.sheet{border-color:CanvasText}.node-button:focus-visible{outline-color:Highlight}}
#board-shell,#board-shell *,header,.toolbar,.toolbar *,button,button *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* What each open choice would do, drawn in the room. Told from the walked trail by shape: dotted against solid, a hollow ring against the filled dot. */
.ghost-path{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-dasharray:1.5 5;stroke-linecap:round;opacity:.6}
.ghost-end{fill:var(--bg);stroke:var(--ink);stroke-width:1.3;opacity:.85}
.ghost-bar{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;opacity:.7}
.ghost-hit{fill:transparent;pointer-events:all;cursor:pointer}
.ghost.lit .ghost-path{opacity:1;stroke-dasharray:none;stroke-width:1.8}.ghost.lit .ghost-end{opacity:1;stroke-width:2.4}.ghost.lit .ghost-bar{opacity:1;stroke-width:3}
.node.lit .node-circle{stroke-width:2.6}
.node.available .node-button{cursor:pointer}
#lattice.beckon .node.available:not(.chosen) .node-circle{animation:beckon .62s ease-in-out}
@keyframes beckon{40%{stroke-width:4.5}}
@media(prefers-reduced-motion:reduce){#lattice.beckon .node.available:not(.chosen) .node-circle{animation:none;stroke-width:3}}
:root[data-motion=reduce] #lattice.beckon .node.available:not(.chosen) .node-circle{animation:none;stroke-width:3}
/* At a desk: the room and the tree side by side and larger, with the story line just under them. */
.board-stage.desk.side{gap:56px}
#feedback.near{bottom:auto;max-height:none;max-width:44rem;font-size:16px;line-height:1.4}