/* A lavender media board is intentional: spare space belongs to the board,
   while the complete photo retains its native proportions. Transparent game
   sprites retain their registered sizing rather than receiving individual mats. */
body.halloween-game{--media-board:#cdb6e7;--media-edge:#cdb6e7}
body.halloween-game .story-picture{background:var(--media-board);border:8px solid var(--media-edge);border-radius:22px}
body.halloween-game .story-picture picture{display:block;width:100%;height:100%;min-height:0}
body.halloween-game.rrdd-adventure .story-picture img{display:block;width:100%;height:100%;object-fit:contain!important}
@media(max-width:700px) and (orientation:portrait){
 body.halloween-game #read:not([hidden]){container-type:size;grid-template-rows:minmax(0,auto) auto!important;align-content:center;gap:8px}
 body.halloween-game #read .story-picture{height:min(58dvh,calc((100cqw - 16px) * 1.7777778 + 16px));max-height:max(100px,calc(100cqh - 250px));min-height:0}
}
/* Decorative frames keep their silhouettes; only the photo aperture gets a
   matching mat, so photographs never need to be cropped to fit the frame. */
body.halloween-game .frame-aperture{background:var(--media-board)}
body.halloween-game .framed-answer,body.halloween-game .keepsake-photo{object-fit:contain;background:var(--media-board)}
body.halloween-game .memory-flying-photo{object-fit:contain;background:var(--media-board)}
body.halloween-game .watch-layout .film{box-shadow:0 0 0 4px var(--media-edge)}
body.halloween-game .rrdd-card-preview-stage{border-radius:24px;outline:4px solid var(--media-edge)}
body.halloween-game .costume-photo-dialog canvas{outline:4px solid var(--media-edge)}

/* The video slot owns spare layout space; the player itself is ALWAYS 9:16.
   Fit both axes before sizing, rather than clamping width after height sizing. */
body.halloween-game .film-slot{
 width:100%;height:100%;min-width:0;min-height:0;
 display:grid;place-items:center;container-type:size;
}
body.halloween-game .watch-layout .film{
 width:min(100cqw,calc(100cqh * .5625))!important;
 height:auto!important;aspect-ratio:9/16;
 min-width:0;min-height:0!important;max-width:none;max-height:none!important;
 margin:0;overflow:hidden;
}
body.halloween-game .film #player,body.halloween-game .film iframe{
 display:block;width:100%!important;height:100%!important;
 position:absolute;inset:0;border:0;
}
body.halloween-game .watch-layout .film{position:relative}
@media(max-width:700px){
 body.halloween-game .watch-layout{min-height:0!important;grid-template-rows:minmax(0,1fr) auto!important}
 body.halloween-game .watch-copy h1{font-size:clamp(23px,5vw,32px);margin:4px 0}
 body.halloween-game .watch-copy p{margin:5px 0}
 body.halloween-game .watch-copy .gold{margin:5px 0}
}
@media(orientation:portrait) and (max-width:900px){
 body.halloween-game .watch-layout{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr) auto!important;min-height:0!important;padding:0;gap:4px}
 body.halloween-game .watch-copy{text-align:center;padding:0}
 body.halloween-game .watch-copy h1,body.halloween-game .watch-copy .eyebrow,body.halloween-game .watch-copy .small{display:none}
 body.halloween-game .watch-copy p{font-size:13px;line-height:1.4;margin:4px 0}
 body.halloween-game .watch-copy .gold{min-height:44px;margin:4px 0}
}
@media(orientation:landscape) and (max-height:500px){
 body.halloween-game .watch-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important;gap:12px;padding:0}
 body.halloween-game .watch-copy h1{font-size:clamp(20px,3.5vw,30px);margin:4px 0}
 body.halloween-game .watch-copy p{font-size:12px;line-height:1.25;margin:5px 0}
 body.halloween-game .watch-copy .gold{margin:5px 0}
 body.halloween-game .watch-copy .small{display:none}
}

/* Size each polaroid from BOTH the tray width and the available row height.
   All six generated frame photos are 25:14, so the whole photo stays visible without bars. */
body.halloween-game #memory.frame-memory #photoTray{container-type:size}
body.halloween-game #memory.frame-memory #photoTray .photo{
 width:min(100cqw,230px,calc((100cqh - 18px - 126px) * .5952381));
 height:auto;max-height:none;min-height:0;aspect-ratio:auto!important;
 grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;
}
body.halloween-game #memory.frame-memory #photoTray .photo span{
 font-size:clamp(10px,1.1vw,14px);line-height:1.2;
}
body.halloween-game #memory.frame-memory #photoTray .photo img{
 display:block;width:100%;height:auto;aspect-ratio:25/14;
 object-fit:contain;background:var(--media-board);
}
body.halloween-game #memory.frame-memory #photoTray .photo{border-color:var(--media-edge);background:var(--media-board)}
body.halloween-game #memory.frame-memory #photoTray .photo.selected{border-color:#ffe379}
@media(max-width:800px){
 body.halloween-game #memory.frame-memory #photoTray .photo{
  width:min(calc((100cqw - 12px) / 3),calc((100cqh - 34px) * 1.7857143));
 }
}
@media(orientation:landscape) and (max-height:500px){
 body.halloween-game #memory.frame-memory:not(.complete) #photoTray .photo{
  width:100%;height:auto;grid-template-columns:40% minmax(0,1fr);
  grid-template-rows:auto;align-items:center;
 }
}