/* Active play is one measured viewport. Hubs and expanded reference sheets retain normal scrolling. */
@media(max-width:1023px){
 body:has(#app[data-section="spielen"][data-ui-state="playing"]){margin:0}
 #app[data-section="spielen"][data-ui-state="playing"]{min-height:100dvh;padding-top:8px!important;padding-bottom:8px!important}
 #app[data-section="spielen"][data-ui-state="playing"] .play-header{padding:4px 0 8px!important;min-height:52px!important;margin-bottom:8px}
 #app[data-section="spielen"][data-ui-state="playing"] .play-layout{display:flex;flex-direction:column;gap:6px;margin:0}
 #app[data-section="spielen"][data-ui-state="playing"] .board-column{gap:4px;min-width:0}
 #app[data-section="spielen"][data-ui-state="playing"] .play-gesture-cue{min-height:40px;margin:0}
 #app[data-section="spielen"][data-ui-state="playing"] .grid-wrap{margin:0 auto!important;flex:none}
 #app[data-section="spielen"][data-ui-state="playing"] #traceStrip{min-height:24px;height:24px;margin:0;justify-content:center;align-items:center;text-align:center}
 #app[data-section="spielen"][data-ui-state="playing"] #traceStrip:not(.on){display:flex;visibility:hidden}
 #app[data-section="spielen"][data-ui-state="playing"] .progress-wrap{margin:0;min-height:20px}
 #app[data-section="spielen"][data-ui-state="playing"] #status{min-height:22px;margin:0;font-size:12px;text-align:center}
 #app[data-section="spielen"][data-ui-state="playing"] #blueprintPanel{order:2;padding:6px!important;margin:0}
 #app[data-section="spielen"][data-ui-state="playing"] #blueprintPanel .word-rail-title{font-size:12px!important;margin:0 0 4px!important}
 #app[data-section="spielen"][data-ui-state="playing"] #blueprintList{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px!important}
 #app[data-section="spielen"][data-ui-state="playing"] .word-slot{min-height:32px!important;padding:4px!important;gap:4px!important;grid-template-columns:18px minmax(0,1fr)!important}
 #app[data-section="spielen"][data-ui-state="playing"] .word-slot .slot-dot{width:18px!important;height:18px!important;font-size:10px!important}
 #app[data-section="spielen"][data-ui-state="playing"] .word-slot .slot-text{gap:2px!important;min-width:0}
 #app[data-section="spielen"][data-ui-state="playing"] .word-slot .nightline-found-word{font-size:12px;overflow-wrap:anywhere}
 #app[data-section="spielen"][data-ui-state="playing"] .word-slot .slot-translation{font-size:10px!important;overflow-wrap:anywhere}
 #app[data-section="spielen"][data-ui-state="playing"] .word-slot .slot-check{display:none!important}
 #app[data-section="spielen"][data-ui-state="playing"] .wortkarte-card:not(.nightline-sheet-expanded){position:relative!important;inset:auto!important;order:3;width:100%!important;max-width:none;min-height:0!important;margin:0!important;transform:none!important;max-height:none!important;overflow:visible!important}
 #app[data-section="spielen"][data-ui-state="playing"] .wortkarte-card:not(.nightline-word-dock){padding:10px!important}
 #app[data-section="spielen"][data-ui-state="playing"] .wortkarte-card.nightline-word-dock:not(.nightline-sheet-expanded){min-height:84px!important}
 #app[data-section="spielen"][data-ui-state="playing"] .play-layout>.play-action-bar{position:relative;inset:auto;order:4;padding:0;margin:0;background:none;backdrop-filter:none}
 #app[data-section="spielen"][data-ui-state="playing"] #hintBtn{min-height:48px}
 #app[data-section="spielen"][data-ui-state="playing"] #board{scroll-margin-bottom:0}
}
#traceStrip .slot-squares{justify-content:center;max-width:100%}
#traceStrip{width:100%;text-align:center}
@media(max-width:1023px){
 #app[data-section="spielen"][data-ui-state="playing"] .board{margin-inline:auto}
 #app[data-section="spielen"][data-ui-state="playing"] #traceStrip .slot-squares{flex-wrap:nowrap}
}
html:has(#app[data-section="spielen"][data-ui-state="playing"]){scrollbar-gutter:auto}
@media(max-width:1023px){
 #app[data-section="spielen"][data-ui-state="playing"] #traceStrip:not(.on){display:none}
 #app[data-section="spielen"][data-ui-state="playing"] #traceStrip .sq{--sq:var(--trace-cell,20px);font-size:clamp(9px,var(--trace-cell,20px),12px)}
 #app[data-section="spielen"][data-ui-state="playing"] #blueprintList .lesson-gender{font-size:10px;padding:1px 3px;line-height:1.2}
}
@media(max-width:1023px){
 #app[data-section="spielen"][data-ui-state="playing"]{padding-top:calc(env(safe-area-inset-top,0px) + 8px)!important;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 8px)!important}
 #app[data-section="spielen"][data-ui-state="playing"] .word-slot{min-height:44px!important}
 #app[data-section="spielen"][data-ui-state="playing"] .play-gesture-cue{padding:0;min-height:44px}
 #app[data-section="spielen"][data-ui-state="playing"] #status{padding:0;line-height:20px;min-height:20px}
}
@media(max-width:380px){#app[data-section="spielen"][data-ui-state="playing"] #blueprintList{grid-template-columns:repeat(2,minmax(0,1fr))}}