/* The path accent acknowledges actions; quiet-state attention is finite and contextual. */
:is(.btn-primary,#hintBtn,.app-nav-link){position:relative;isolation:isolate}
.flow-tap::after,.flow-suggest::after{content:'';position:absolute;inset:-2px;pointer-events:none;border:2px solid var(--gold-text,var(--accent));border-radius:inherit;opacity:0;z-index:2}
.flow-tap::after{animation:flow-action 600ms ease-out}.flow-suggest::after{animation:flow-cue 850ms ease-in-out 2}
.nightline-brand.flow-mark svg path{stroke-dasharray:1;animation:flow-logo 650ms cubic-bezier(.16,1,.3,1)}
.app-nav-link{transition:background-color 150ms ease,color 150ms ease,box-shadow 150ms ease}
@keyframes flow-action{0%{opacity:.85;clip-path:inset(0 100% 0 0)}55%{opacity:.8;clip-path:inset(0)}100%{opacity:0;clip-path:inset(0)}}
@keyframes flow-cue{0%,100%{opacity:0;transform:scale(1)}50%{opacity:.85;transform:scale(1.045)}}
@keyframes flow-logo{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.flow-tap::after,.flow-suggest::after{display:none}.nightline-brand.flow-mark svg path{animation:none;stroke-dasharray:none}.app-nav-link{transition:none}}
/* Repeated setup is optional once there is a saved puzzle or a word collection. */
.setup-panel.nightline-returning-mode:not(.returning-options-open)>:is(.setup-lang,.setup-title,.setup-sub,.setup-persona-topic,.level-grid,.topic-block){display:none}
.setup-panel.nightline-returning-mode>.setup-quick-start{display:none}
.returning-options-open .level-grid{scroll-margin-top:90px}
#playExitBtn{width:auto;min-width:48px;gap:2px;padding:0 9px;border-radius:10px}
.play-exit-label{font-size:12px;font-weight:600}
.nightline-updates{min-width:44px;min-height:44px;padding:8px 10px;border:1px solid var(--line-ui);border-radius:9px;background:transparent;color:var(--text-muted);font:500 12px/1.3 var(--font)}
.nightline-updates:hover{background:var(--accent-wash);color:var(--text)}
.nightline-motion-setting{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;margin:0 0 16px;font-size:14px;color:var(--text)}
.nightline-motion-setting input{accent-color:var(--accent);width:24px;height:24px;margin:10px;flex:none}
.nightline-brand.flow-mark svg circle{transform-box:fill-box;transform-origin:center;animation:flow-station .9s ease-out}
.nightline-brand.flow-mark svg circle:last-child{animation-delay:.25s}
@keyframes flow-station{0%,100%{transform:scale(1)}45%{transform:scale(1.6);fill:var(--brand-pop)}}
/* The same route accents identify destinations without relying on colour alone. */
.app-nav-link[data-section="woerter"]{--flow-colour:var(--success)}
.app-nav-link[data-section="wiederholen"]{--flow-colour:var(--gold-text)}
.flow-suggest::after,.flow-tap::after{border-color:var(--flow-colour,var(--accent))}
.flow-suggest .app-nav-ico svg,.flow-tap .app-nav-ico svg{animation:flow-icon .6s var(--ease-out)}
@keyframes flow-icon{0%,100%{transform:scale(1)}45%{transform:scale(1.16)}}
@media(max-width:420px){.app[data-ui-state="playing"] .nightline-brand>span{display:none}.app[data-ui-state="playing"] .nightline-brand{gap:0;margin-right:0!important}.nightline-updates{font-size:11px;padding-inline:7px}.play-header{gap:5px}}
@media(prefers-reduced-motion:reduce){.nightline-brand.flow-mark svg circle,.flow-suggest .app-nav-ico svg,.flow-tap .app-nav-ico svg{animation:none}}


.app[data-motion-hints="false"] .cell.guide-start{animation:none;outline:2px solid var(--accent);outline-offset:2px}

#grid.flow-suggest{position:relative;isolation:isolate}
/* At the narrowest phone size the mark retains the brand without overlapping translated utilities. */
@media(max-width:360px){.nightline-brand>span{display:none}.nightline-brand{margin-right:auto!important}.app-nav-link>span:last-child{max-width:100%;overflow-wrap:anywhere}}
@media(max-width:720px){.nightline-brand{font-size:21px;gap:5px}.play-header{gap:8px}.play-header-tools{gap:3px}}
/* A visible, replayable gesture lives with the board; no one has to infer the first action. */
.board-caption.caption-in-gesture{display:none}
.play-gesture-cue{display:flex;align-items:center;gap:10px;position:relative;min-height:48px;margin:0 0 12px;padding:2px 0;color:var(--text);width:100%;max-width:var(--board-max,560px);isolation:isolate;border-radius:10px}
.play-gesture-cue>svg{color:var(--accent);flex:none;width:36px;height:30px;overflow:visible}
.play-gesture-cue svg circle{fill:var(--bg);stroke:var(--accent);stroke-width:1.6}
.play-gesture-cue svg .gesture-traveller{fill:var(--gold-text);stroke:var(--bg);stroke-width:1.5;opacity:0}
.gesture-prompt{font-size:13px;line-height:1.4;flex:1;min-width:0}
.gesture-level{font-size:11px;color:var(--text-muted);border:1px solid var(--line-ui);border-radius:5px;padding:3px 5px}
.gesture-show{background:var(--accent-wash);border:1px solid var(--line-ui);color:var(--text);font-size:12px;padding:8px 11px;min-height:44px;flex:none}
.gesture-show:hover{border-color:var(--accent)}
.play-gesture-cue.flow-suggest{background:var(--accent-wash)}
.play-gesture-cue.flow-suggest::after{inset:0}
.play-gesture-cue.flow-suggest .gesture-traveller{offset-path:path('M5 24H22V8H39');animation:gesture-connect 1.7s var(--ease-out) both}
@keyframes gesture-connect{0%{offset-distance:0%;opacity:1}90%{offset-distance:100%;opacity:1}100%{offset-distance:100%;opacity:0}}
.app[data-motion-hints=true] .nightline-brand.flow-mark svg path{animation-duration:1s}
@media(max-width:480px){.play-gesture-cue{gap:7px;margin-bottom:8px}.gesture-prompt{font-size:12px}.play-gesture-cue>svg{width:30px}.gesture-show{font-size:11px;padding-inline:8px}.gesture-level{font-size:10px}}
@media(prefers-reduced-motion:reduce){.play-gesture-cue.flow-suggest .gesture-traveller{animation:none;opacity:0}}
/* Finite tactile feedback and a shared constellation motif across destinations. */
.nightline-updates{display:inline-flex;align-items:center;justify-content:center;gap:6px;color:var(--text)}
.nightline-updates svg{width:19px;height:19px;fill:none;stroke:var(--gold-text);stroke-width:1.5}
.flow-tap{animation:flow-punch 350ms ease-out}
.flow-sparks{position:fixed;z-index:10000;pointer-events:none;width:0;height:0;color:var(--gold-text)}
.flow-sparks i{position:absolute;width:4px;height:4px;border-radius:50%;background:currentColor;transform:rotate(var(--angle));animation:flow-spark 700ms ease-out both}
.flow-suggest{position:relative;isolation:isolate}
@keyframes flow-punch{0%,100%{scale:1}35%{scale:.96}70%{scale:1.025}}
@keyframes flow-spark{from{opacity:1;translate:0 0}to{opacity:0;transform:rotate(var(--angle)) translateX(45px);scale:.25}}
@media(max-width:520px){.nightline-updates>span{display:none}.nightline-updates{padding:8px;min-width:44px}}
.completion-reaction{border:1px solid var(--line-ui);border-radius:16px;padding:18px;margin-top:20px;background:var(--surface)}
.completion-reaction h3{font-size:15px;margin:0 0 14px}
.completion-reaction .pulse-question{display:none}
.completion-reaction .pulse-chips{display:flex;gap:8px;flex-wrap:wrap}
.completion-reaction .pulse-chip{flex:1;min-height:48px;border-radius:12px}
.completion-reaction .pulse-chip:nth-child(1){border-top:3px solid var(--accent)}
.completion-reaction .pulse-chip:nth-child(2){border-top:3px solid var(--success)}
.completion-reaction .pulse-chip:nth-child(3){border-top:3px solid var(--gold-text)}
.completion-reaction.reaction-answered{padding-block:12px}
.completion-reaction.reaction-answered h3{display:none}
.completion-reaction .pulse-thanks{margin:0 0 6px}
@media(prefers-reduced-motion:reduce){.flow-tap{animation:none}.flow-sparks{display:none}}
/* Fourth annotation pass: light utility controls, connected lettering and destination signals. */
#nightlineUpdates,#playExitBtn,.nightline-sheet-head .nightline-sheet-expand,.gesture-show{border:0;background:transparent;box-shadow:none}
#nightlineUpdates:hover,#playExitBtn:hover,.nightline-sheet-head .nightline-sheet-expand:hover,.gesture-show:hover{background:var(--accent-wash)}
.nightline-brand{gap:12px!important}
.connected-wordmark{display:inline-flex;position:relative;gap:.035em;padding-bottom:3px}
.connected-wordmark>span{position:relative;display:inline-block}
.connected-wordmark::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--gold-text),var(--accent));transform-origin:left;scale:0 1}
.flow-mark .connected-wordmark::after{animation:word-route 1.1s ease-out}
.flow-mark .connected-wordmark>span{animation:letter-route .6s ease-out both;animation-delay:calc(var(--letter)*65ms)}
@keyframes word-route{0%{scale:0 1;opacity:0}40%{scale:1 1;opacity:1}100%{scale:1 1;opacity:0}}
@keyframes letter-route{0%,100%{translate:0 0}45%{translate:0 -3px;color:var(--gold-text)}}
.nightline-sheet-head .nightline-sheet-expand{display:inline-flex;align-items:center;gap:7px;color:var(--accent);padding-inline:8px}
.nightline-sheet-expand::before{content:'';width:18px;height:18px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 16v3h14v-3M8 10l4-4 4 4M12 6v10' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;flex:none}
.gesture-show{display:flex;align-items:center;gap:6px;color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.gesture-show::before{content:'';width:15px;height:15px;background:currentColor;clip-path:polygon(25% 10%,90% 50%,25% 90%);flex:none}
.app-nav-link.flow-suggest .app-nav-ico{animation:destination-bounce 900ms ease-out 2}
@keyframes destination-bounce{0%,100%{translate:0 0;rotate:0deg}30%{translate:0 -5px;rotate:-8deg}60%{translate:0 -2px;rotate:8deg}}
:is(#intentSaveHome,#intentSaveProgress).flow-suggest{box-shadow:0 0 0 1px var(--accent),0 8px 28px color-mix(in oklch,var(--accent) 25%,transparent)}
@media(prefers-reduced-motion:reduce){.flow-mark .connected-wordmark::after,.flow-mark .connected-wordmark>span,.app-nav-link.flow-suggest .app-nav-ico{animation:none}}