/* Presentation lives above/below the canvas content, never in its hit targets. */
.mindmap-mode .board[data-fx]{--fx-strength:.6;--fx-a:159,141,240;--fx-b:116,181,232;--fx-shade:7,10,24}
.mindmap-mode .board[data-fx=vaporwave]{--fx-a:244,117,216;--fx-b:85,205,233;--fx-shade:19,6,35}
.mindmap-mode .board[data-fx=cinema]{--fx-a:227,172,96;--fx-b:158,144,115;--fx-shade:20,13,7}
.map-fx-atmosphere,.map-fx-film{position:absolute;inset:0;overflow:hidden;pointer-events:none;contain:strict}
.map-fx-atmosphere{z-index:0;opacity:calc(var(--fx-strength) * .8);background:linear-gradient(145deg,rgba(var(--fx-a),.12),transparent 45%,rgba(var(--fx-b),.08))}
.map-fx-film{z-index:14}
.board[data-fx=clean] :is(.map-fx-atmosphere,.map-fx-film){display:none}
.map-fx-light{position:absolute;width:90%;height:130%;border-radius:50%;background:radial-gradient(ellipse,rgba(var(--fx-a),.3),rgba(var(--fx-a),.08) 38%,transparent 66%);will-change:auto}
.map-fx-light-a{left:-25%;top:-45%}
.map-fx-light-b{right:-28%;bottom:-55%;background:radial-gradient(ellipse,rgba(var(--fx-b),.32),rgba(var(--fx-b),.1) 38%,transparent 66%)}
.fx-motion .map-fx-light-a{animation:map-fx-drift 28s ease-in-out infinite alternate}
.fx-motion .map-fx-light-b{animation:map-fx-drift 35s ease-in-out infinite alternate-reverse}
@keyframes map-fx-drift{to{transform:translate(14%,16%) scale(1.15)}}
.map-fx-film>div{position:absolute;inset:0;display:none;pointer-events:none}
.fx-vignette .map-fx-vignette{display:block;background:radial-gradient(ellipse at center,transparent 30%,rgba(var(--fx-shade),.72) 100%);opacity:calc(var(--fx-strength) * .7)}
body.day .fx-vignette .map-fx-vignette{opacity:calc(var(--fx-strength) * .35)}
.fx-grain .map-fx-grain{display:block;opacity:calc(var(--fx-strength) * .13);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.75' filter='url(%23n)'/%3E%3C/svg%3E");background-repeat:repeat}
.fx-scanlines .map-fx-scanlines{display:block;background:repeating-linear-gradient(to bottom,transparent 0 3px,rgba(var(--fx-shade),.2) 3px 4px);opacity:calc(var(--fx-strength) * .55)}
.mindmap-mode .board.fx-glow .bnode .bnode-cardholder :is(.nx,.map-media-card){box-shadow:0 0 18px rgba(var(--fx-a),calc(var(--fx-strength) * .32)),0 0 48px rgba(var(--fx-b),calc(var(--fx-strength) * .24)),0 6px 20px #0003}
.mindmap-mode .board.fx-glow .bnode-circle{filter:drop-shadow(0 0 8px rgba(var(--fx-a),calc(var(--fx-strength) * .5)))}
.map-fx-trace{stroke:rgb(var(--fx-b));stroke-width:2;stroke-dasharray:5 59;stroke-linecap:round;vector-effect:non-scaling-stroke;pointer-events:none;opacity:calc(var(--fx-strength) * .85);filter:drop-shadow(0 0 3px rgba(var(--fx-b),.6))}
.fx-motion .map-fx-trace[data-directed=true]{animation:map-fx-flow 3s linear infinite}
.fx-motion .map-fx-trace[data-directed=false]{animation:map-fx-breathe 4s ease-in-out infinite alternate}
@keyframes map-fx-flow{to{stroke-dashoffset:-64}}
@keyframes map-fx-breathe{from{opacity:calc(var(--fx-strength) * .25)}to{opacity:calc(var(--fx-strength) * .9)}}
@media(prefers-reduced-motion:reduce){.map-fx-light,.map-fx-trace{animation:none!important}}

.map-fx-panel{position:absolute;right:18px;top:18px;z-index:28;width:310px;box-sizing:border-box;max-width:calc(100% - 36px);max-height:calc(100% - 36px);overflow:auto;overscroll-behavior:contain;touch-action:auto;padding:18px;border:1px solid var(--ui-border);border-radius:15px;background:var(--ui-panel);color:var(--ui-text);box-shadow:0 12px 32px #0004;font:13px/1.4 Arial,sans-serif;cursor:default;user-select:text}
.map-fx-header{display:flex;justify-content:space-between;align-items:center;gap:12px}
.map-fx-header h2{font:600 16px/1.3 Arial,sans-serif;margin:0}
.map-fx-header button{background:none;border:0;color:var(--ui-text2);font:22px/1 Arial,sans-serif;cursor:pointer;padding:2px 5px;border-radius:5px}
.map-fx-intro{font-size:12px;color:var(--ui-text2);margin:7px 0 16px}
.map-fx-looks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.map-fx-look{display:flex;flex-direction:column;gap:5px;min-width:0;padding:7px 7px 9px;border:1px solid var(--ui-border);border-radius:9px;background:var(--ui-input);color:var(--ui-text);text-align:left;cursor:pointer;font:12px/1.3 Arial,sans-serif}
.map-fx-look[aria-pressed=true]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.map-fx-look small{display:none}
.map-fx-swatch{display:block;width:100%;height:32px;border-radius:5px;background:radial-gradient(circle at 30% 55%,#40434c,transparent 60%),#1c2026}
.map-fx-look[data-look=dream] .map-fx-swatch{background:radial-gradient(ellipse at 15% 25%,#9d8dcc77,transparent 65%),radial-gradient(ellipse at 90% 80%,#599fb5aa,transparent 75%),#292a41}
.map-fx-look[data-look=vaporwave] .map-fx-swatch{background:repeating-linear-gradient(transparent 0 3px,#170d2b44 3px 4px),linear-gradient(125deg,#a03c8e,#4c286d 45%,#319caf)}
.map-fx-look[data-look=cinema] .map-fx-swatch{background:radial-gradient(ellipse at 50% 40%,#ac8b4f77,transparent 70%),#242019}
.map-fx-panel :focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.map-fx-controls{margin-top:18px}.map-fx-controls.is-off{opacity:.45}
.map-fx-strength>span{display:flex;justify-content:space-between;align-items:center}
.map-fx-strength output{color:var(--ui-text2);font-size:12px;font-variant-numeric:tabular-nums}
.map-fx-strength input{width:100%;margin:10px 0 12px;accent-color:var(--gold);cursor:pointer}
.map-fx-toggle{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:8px 0;border-top:1px solid var(--ui-border2);cursor:pointer}
.map-fx-toggle strong{display:block;font-size:12px;font-weight:500}.map-fx-toggle small{display:block;color:var(--ui-text3);font-size:10px;margin-top:2px;line-height:1.5}
.map-fx-toggle input{width:16px;height:16px;flex-shrink:0;accent-color:var(--gold);cursor:pointer}
.map-fx-foot,.map-fx-motion-note{margin:14px 0 0;color:var(--ui-text3);font-size:10px;line-height:1.5}
.map-fx-motion-note{color:var(--gold)}
@media(max-width:500px){.map-fx-panel{top:10px;right:10px;max-height:calc(100% - 20px);max-width:calc(100% - 20px)}}