/* Fit the timer, complete artwork and controls inside Safari's visible viewport. */
:root{--viewport-height:100vh}
@supports(height:100svh){:root{--viewport-height:100svh}}
#app{
 position:relative;display:grid;
 grid-template-rows:auto auto minmax(0,1fr) auto auto;
 gap:8px;height:var(--viewport-height);min-height:420px;
 padding:12px 18px;
 padding-top:max(12px,env(safe-area-inset-top));
 padding-bottom:max(12px,env(safe-area-inset-bottom));
}
header{margin:0}.brand{font-size:24px}.brand-icon{width:40px;height:40px}
.tabs{width:100%;margin:0 auto}.tabs button{min-height:44px;padding:8px 12px}
#timer-panel{min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto 9px auto;gap:6px}
.clock-row{margin:0;gap:16px}#clock{font-size:clamp(58px,10vh,90px);line-height:1.05}
.scene-slot{min-height:0;min-width:0;display:flex;align-items:center;justify-content:center}
.scene-wrap{flex:none;max-width:100%;max-height:100%;min-width:0;min-height:0}
.scene-wrap canvas,.scene-wrap.is-story canvas{width:100%;height:100%;aspect-ratio:auto;object-fit:contain}
.scene-caption{bottom:10px;left:10px;padding:7px 11px;max-width:85%}
#chapter-label{font-size:14px}#scene-copy{font-size:11px;line-height:1.4}
.progress-row{margin:0 4px}progress{margin:0}
.bottom{margin:0;gap:12px}.actions button{min-height:48px}
footer{margin:0;min-height:30px}footer button{min-height:30px;padding:5px 10px}
#notice{margin:0;min-height:0}#notice:empty{display:none}
/* The optional preview controls live below the screen, not at the expense of the art. */
#preview-panel{position:absolute;top:100%;left:18px;right:18px;margin:8px 0 16px}
@media(min-width:800px) and (orientation:landscape){
 #timer-panel{
  grid-template-columns:minmax(0,1fr) 280px;
  grid-template-rows:minmax(0,1fr) auto 9px;
  column-gap:18px;
 }
 .scene-slot{grid-column:1;grid-row:1}
 .progress-row{grid-column:1;grid-row:2}
 progress{grid-column:1;grid-row:3}
 .clock-row{grid-column:2;grid-row:1;align-self:start;flex-direction:column;gap:8px}
 #clock{font-size:clamp(60px,11vh,90px)}
 .bottom{grid-column:2;grid-row:1;align-self:end;flex-direction:column;gap:14px}
 #settings{width:100%;justify-content:center;gap:10px}
 .actions{width:100%;max-width:none;flex:none}
 .actions button{min-height:54px;padding:10px}
 .scene-caption{max-width:90%}
}
@media(max-width:760px){
 #app{padding:10px 14px;gap:6px}
 header{margin:0}.brand{font-size:22px}
 .bottom{gap:10px}#settings{gap:10px}
 .tabs button{min-height:42px;font-size:13px;padding:7px 5px}
 #chapter-label{font-size:13px}#scene-copy{font-size:10px}
}
@media(max-height:600px) and (min-width:800px){
 #app{padding:8px 14px;gap:6px}
 .tabs button{min-height:40px}
 .clock-row{gap:6px}#clock{font-size:64px}
 .bottom{gap:8px}.actions button{min-height:44px}
}