/* SNACKRIFICE painted outline skin. Existing desktop geometry and padding stay intact. */
:root{--sf-assets:'../frames/'}
.console,.readout,.choice,.window-tab,.order-card,.inquiry,.selected-info,.snack-reaction,.break-card,.snack-option,dialog,.primary,.secondary,.change-snack,.close,nav button,.ending-card{
  --sf-current:initial;
  border-image-source:var(--sf-current,var(--sf-default));
  border-image-slice:var(--sf-slice);
  border-image-width:var(--sf-width);
  border-image-outset:0;
  border-image-repeat:stretch;
  border-color:transparent;
}
/* 2x sources are intentionally used at every density. Slices are source pixels; widths are CSS pixels. */
.console{--sf-default:url('../frames/console_frame_default_2x.png');--sf-slice:40;--sf-width:20px}
.readout{--sf-default:url('../frames/readout_frame_default_2x.png');--sf-slice:18;--sf-width:9px}
.choice,.break-card,.snack-option,.primary,.secondary,.change-snack,.close,nav button{--sf-default:url('../frames/reply_frame_default_2x.png');--sf-hover:url('../frames/reply_frame_hover_2x.png');--sf-pressed:url('../frames/reply_frame_pressed_2x.png');--sf-selected:url('../frames/reply_frame_selected_2x.png');--sf-focused:url('../frames/reply_frame_focused_2x.png');--sf-disabled:url('../frames/reply_frame_disabled_2x.png');--sf-slice:20;--sf-width:9px}
.window-tab{--sf-default:url('../frames/window_frame_default_2x.png');--sf-hover:url('../frames/window_frame_hover_2x.png');--sf-pressed:url('../frames/window_frame_pressed_2x.png');--sf-selected:url('../frames/window_frame_selected_2x.png');--sf-focused:url('../frames/window_frame_focused_2x.png');--sf-disabled:url('../frames/window_frame_disabled_2x.png');--sf-slice:18;--sf-width:9px}
.order-card{--sf-default:url('../frames/order_frame_default_2x.png');--sf-selected:url('../frames/order_frame_selected_2x.png');--sf-slice:24;--sf-width:9px}
.inquiry,.selected-info,.snack-reaction,.ending-card{--sf-default:url('../frames/inset_frame_default_2x.png');--sf-hover:url('../frames/inset_frame_hover_2x.png');--sf-pressed:url('../frames/inset_frame_pressed_2x.png');--sf-selected:url('../frames/inset_frame_selected_2x.png');--sf-focused:url('../frames/inset_frame_focused_2x.png');--sf-disabled:url('../frames/inset_frame_disabled_2x.png');--sf-slice:20;--sf-width:8px}
dialog{--sf-default:url('../frames/modal_frame_default_2x.png');--sf-slice:40;--sf-width:20px}
.change-snack,nav button{--sf-width:6px}
.primary,.close{border-style:solid}
.order-card.substitute,.window-tab.active,.snack-option.requested,[aria-pressed=true]:is(.choice,.window-tab,.snack-option){--sf-current:var(--sf-selected,var(--sf-default))}
:is(.choice,.window-tab,.break-card,.snack-option,.primary,.secondary,.change-snack,.close,nav button):hover:not(:disabled){--sf-current:var(--sf-hover,var(--sf-default))}
:is(.choice,.window-tab,.break-card,.snack-option,.primary,.secondary,.change-snack,.close,nav button):active:not(:disabled){--sf-current:var(--sf-pressed,var(--sf-default))}
:is(.choice,.window-tab,.break-card,.snack-option,.primary,.secondary,.change-snack,.close,nav button):focus-visible{--sf-current:var(--sf-focused,var(--sf-default))}
:is(.choice,.window-tab,.break-card,.snack-option,.primary,.secondary,.change-snack,.close,nav button):disabled{--sf-current:var(--sf-disabled,var(--sf-default))}
/* No layout box is added to the world. The overlay is transparent and never takes input. */
.world::after{content:'';position:absolute;inset:0;box-sizing:border-box;border:14px solid transparent;border-image-source:url('../frames/scene_frame_default_2x.png');border-image-slice:40;border-image-width:14px;border-image-repeat:stretch;pointer-events:none;z-index:5}
/* Only the existing serif dialogue face changes. Body, headings, weights and sizes keep their hierarchy. */
.story blockquote{font-family:'Lora',Georgia,serif}
/* Place the original dialogs over the console. The customer and cabinet remain visible through the backdrop. */
dialog{position:fixed;left:calc(100vw * .591836735 + 18px);right:18px;top:116px;bottom:auto;margin:0;width:auto;max-width:none;max-height:calc(100svh - 187px);overflow:auto}
dialog::backdrop{background:transparent;backdrop-filter:none}
@media(min-width:701px) and (max-width:1000px){dialog{left:calc(50vw + 12px);right:12px;top:112px;max-height:calc(100svh - 183px)}}
/* A compact, pinned world stays above the independently scrolling mobile console. */
@media(max-width:700px){
  :root{--sf-mobile-world:clamp(170px,38svh,340px)}
  body{height:100svh;overflow:hidden}
  header{height:77px}
  main#game{height:calc(100svh - 77px);min-height:0;max-height:none;overflow:hidden}
  .world{height:var(--sf-mobile-world);flex:0 0 var(--sf-mobile-world)}
  .console{flex:1 1 auto;min-height:0;overflow:auto}
  .bottom{display:none}
  .machine{height:calc(var(--sf-mobile-world) - 24px);width:auto;max-height:none;right:4%;bottom:20px}
  .character-wrap{height:calc(var(--sf-mobile-world) - 5px);width:46%;left:-2%;bottom:4px}
  .location{top:12px;left:14px;font-size:10px;letter-spacing:2px}
  .location span{font-size:7px}
  .act-label{top:50px;left:14px;max-width:41%;font-size:12px;line-height:1.35;padding:7px 9px}
  .person-tag{bottom:24px;left:10%;max-width:88%;font-size:7px;padding:5px 7px}
  .world::after{border-width:10px;border-image-width:10px}
  .foreground{height:24px;font-size:6px}
  .console{--sf-width:14px}
  dialog{left:10px;right:10px;top:calc(77px + var(--sf-mobile-world) + 6px);max-height:calc(100svh - 77px - var(--sf-mobile-world) - 16px);width:auto;margin:0}
}

/* Fit short desktop windows without stretching the cabinet or moving the normal desktop layout. */
@media(min-width:701px) and (max-height:830px){
  body{height:100svh;overflow:hidden}
  main#game{height:calc(100svh - 151px);min-height:0;max-height:none;overflow:hidden}
  .console{min-height:0;overflow:auto}
  .machine{width:min(57%,calc(64.9565svh - 98.084px));max-height:none}
}
@media(min-width:701px) and (max-width:1000px) and (max-height:830px){.machine{width:min(69%,calc(64.9565svh - 98.084px))}}
@media(min-width:1600px) and (max-height:830px){.machine{width:min(53%,calc(64.9565svh - 98.084px))}}
/* Console sections keep their intrinsic heights; the console owns scrolling. */
.console>.readout,.console>.story,.console>.selection,.console>.controls,.console>.console-footer{flex-shrink:0}
.readout{position:sticky;top:0;z-index:10;background:#17201b}