/* Nine's Magic Mirror (2026-10-08): styles for week-2026-10-05-film.js and for its card on the hub.
   While the film is open, #adventure carries the class "ninefilm" and fills the screen, so no
   control can sit below the fold on a sideways phone. Every rule here is scoped to that class,
   to .nf-*, or to the one hub card: no other activity changes.
   Sections: hub card; full-screen stage; picture; caption and controls. */

/* ---------- hub card: a wide strip under the bakery and the garden ---------- */
.week-cards .week-card.film-card{grid-column:1/-1;background:#eaf3ec}
.week-card.film-card>canvas{aspect-ratio:900/500;height:auto}
/* Side by side wherever the bakery and garden are side by side. The picture keeps its own shape; when
   the words make the card taller, the card's own sky and grass carry on above and below the picture. */
@media(min-width:701px){
  .week-cards .week-card.film-card{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;background:linear-gradient(#dcebd8 0 50%,#bfd39a 50% 100%)}
  .week-card.film-card>canvas{border-bottom:0}
  .week-card.film-card>div{align-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:#eaf3ec;border-left:3px solid var(--ink)}
}

/* ---------- full-screen stage ---------- */
html.nf-open,html.nf-open body{overflow:hidden}
#adventure.ninefilm{position:fixed;z-index:60;inset:0;margin:0;width:auto;height:100vh;height:100dvh;border:0;border-radius:0;box-shadow:none;padding:8px 12px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);column-gap:12px;row-gap:6px;align-items:center;background:#f1f4de;background-image:radial-gradient(#43644d12 1px,transparent 1px);background-size:18px 18px}
#adventure.ninefilm .adventure-head{display:contents}
#adventure.ninefilm #menu-button{grid-column:1;grid-row:1;min-height:44px;padding:8px 14px;font-size:16px}
#adventure.ninefilm #adventure-title{grid-column:2;grid-row:1;margin:0;font-size:clamp(19px,5vw,26px);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#adventure.ninefilm #activity-progress{grid-column:3;grid-row:1;font-size:15px;font-weight:600;white-space:nowrap}
#adventure.ninefilm #subject,#adventure.ninefilm #instruction,#adventure.ninefilm #feedback{position:absolute;width:1px;height:1px;min-height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#adventure.ninefilm #play-space{grid-column:1/-1;grid-row:2;min-height:0;height:100%;display:flex}
.nf{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;gap:6px}

/* ---------- picture ---------- */
.nf-stage{position:relative;flex:1 1 0;min-height:0;overflow:hidden;border:3px solid var(--ink);border-radius:22px;background:#dcebd8;box-shadow:4px 5px 0 #b9cab0}
.nf-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---------- caption and controls ---------- */
.nf-strip{display:flex;align-items:center;gap:6px 14px;min-height:52px}
.nf-cap{flex:1 1 0;min-width:0;margin:0;font-size:18px;line-height:1.22;font-weight:500}
.nf-ctl{flex:0 0 auto;display:flex;align-items:center;gap:8px}
#adventure.ninefilm .nf-ctl button{min-height:46px;min-width:46px;padding:8px 13px;font-size:16px;white-space:nowrap}
#adventure.ninefilm .nf-ctl .primary{background:var(--green);color:#fff;border-color:var(--ink)}
.nf-digits{display:flex;gap:10px}
#adventure.ninefilm .nf-ctl .nf-digit{min-width:66px;min-height:50px;padding:0 10px;border:2.5px solid var(--ink);border-radius:15px;font:700 30px/1 'Baloo 2',Fredoka,system-ui,sans-serif;background:#fffef7}
#adventure.ninefilm .nf-ctl .nf-digit.first{color:#b9442c;background:#fdeee6}
#adventure.ninefilm .nf-ctl .nf-digit.last{color:#225b88;background:#e6f0f7}
#adventure.ninefilm .nf-ctl .nf-digit.no{opacity:.38;box-shadow:none;animation:nf-shake .4s}
#adventure.ninefilm .nf-ctl .nf-digit.glow{background:var(--gold);animation:nf-glow 1s ease-in-out infinite}
@keyframes nf-shake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes nf-glow{0%,100%{box-shadow:0 0 0 0 #f6ce72}50%{box-shadow:0 0 0 7px #f6ce7299}}
@media(max-width:700px) and (orientation:portrait){
  .nf-strip{flex-direction:column;align-items:stretch;gap:8px}
  .nf-cap{flex:0 0 auto;min-height:3.66em;text-align:center}
  .nf-ctl{justify-content:center;flex-wrap:wrap}
  /* the name needs the room on an upright phone; the caption says where the film is */
  #adventure.ninefilm #activity-progress{display:none}
}
@media(max-height:500px) and (orientation:landscape){
  .nf-cap{font-size:17px}
  #adventure.ninefilm .nf-ctl button{padding:8px 11px}
}