/* My Little Cashier · Mobile prayer artwork cleanup + softer POS typography.
   UI-only patch; order, prayer data, rewards and localStorage unchanged. */

/* Preserve the exact PNG template, but remove white letterboxing around its
   transparent edges and gaps between its component cards on small devices. */
@media (max-width:669px) {
  html body #page-prayer {
    padding: 0 0 18px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    background: linear-gradient(180deg,#ffd1e2 0%,#ffdeea 24%,#ffe2ec 64%,#ffd2e2 100%) !important;
    overflow: hidden !important;
  }
  html body #page-prayer .mlc-prayer-mobile {
    display: block !important;
    width: 100% !important;
    max-width: 460px !important;
    margin: 0 auto !important;
    padding: 0 5px 8px !important;
    background: transparent !important;
  }
  html body #page-prayer .pm-main {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 auto 8px !important;
    background: transparent !important;
  }
  html body #page-prayer .pm-secondary {
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    background: transparent !important;
  }
  html body #page-prayer .pm-left,
  html body #page-prayer .pm-notices {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    gap: 8px !important;
    background: transparent !important;
  }
  html body #page-prayer .pm-location,
  html body #page-prayer .pm-date,
  html body #page-prayer .pm-next,
  html body #page-prayer .pm-girl,
  html body #page-prayer .pm-notice-header,
  html body #page-prayer .pm-notice-card {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    background-color: transparent !important;
  }
  html body #page-prayer .mlc-prayer-status-line {
    margin: 8px 6px 0 !important;
    padding: 7px 8px !important;
    border-radius: 12px !important;
    background: rgba(255,245,250,.82) !important;
  }
  body:has(#page-prayer.active) #mlcInstallPrompt,
  body:has(#page-prayer.active) #mlcInstallNotice { display:none!important; }
}
/* Larger phones occasionally have CSS viewport above 650px: keep one scene,
   no alternate white slab behind the template. */
@media (min-width:670px) and (max-width:1020px) {
  html body #page-prayer {
    background: #ffdeea !important;
    border-color: #f8d0df !important;
  }
}

/* POS only: dial back the VT323 accessibility enlargement by ~12–16%.
   Keep prayer text unchanged; maintain comfortable touch targets. */
html body #page-pos { font-size: 20px !important; }
html body #page-pos .packing-options button,
html body #page-pos .packing-tools button,
html body #page-pos #dispatchPackingButton {
  font-size: 20px !important;
  line-height: 1.15 !important;
  min-height: 51px !important;
  padding: 9px 10px !important;
}
html body #page-pos .packing-tools #packingStatus,
html body #page-pos .packing-size-control,
html body #page-pos .packing-size-control span,
html body #page-pos #shippingAddressInput,
html body #page-pos .packing-size-control input:not([type="range"]) {
  font-size: 19px !important;
  line-height: 1.2 !important;
}
html body #page-pos .fake-order-head small,
html body #page-pos .fake-order-head strong,
html body #page-pos .fake-order-customer-copy strong,
html body #page-pos .fake-order-customer-copy p,
html body #page-pos #fakeOrderStory,
html body #page-pos .mlc-story-courier-line,
html body #page-pos .day6-entry {
  font-size: 19px !important;
  line-height: 1.22 !important;
}
html body #page-pos .fake-order-item,
html body #page-pos .fake-order-item span,
html body #page-pos .fake-order-items,
html body #page-pos .fake-order-points,
html body #page-pos .fake-order-points span,
html body #page-pos .fake-order-points b {
  font-size: 19px !important;
  line-height: 1.2 !important;
}
html body #page-pos .fake-order-item {
  min-height: 50px !important;
  padding: 7px 9px !important;
}
html body #page-pos .nommi-reward-copy strong {font-size:20px !important;}
html body #page-pos .nommi-reward-copy p,
html body #page-pos .nommi-reward-copy small,
html body #page-pos .nommi-reward-copy b,
html body #page-pos .nommi-reward-panel .nommi-reward-copy span {font-size:18px !important;line-height:1.22 !important;}
html body #page-pos .nommi-reward-panel button {font-size:20px!important;min-height:43px!important;}
html body #page-pos .food-name,
html body #page-pos .food-title,
html body #page-pos .food-card h3,
html body #page-pos .food-card h4 {font-size:19px!important;line-height:1.16!important;}
html body #page-pos .food-price,
html body #page-pos .cart-line-price {font-size:21px!important;}
html body #page-pos .food-card button,
html body #page-pos .food-grid button,
html body #page-pos .category-row button,
html body #page-pos .cart-panel button,
html body #page-pos .searchrow button,
html body #page-pos .panel-head .small,
html body #page-pos .panel-head button {font-size:19px!important;}
html body #page-pos .cart-items .empty,
html body #page-pos .cart-items .cart-empty,
html body #page-pos .summary,
html body #page-pos .summary .sumrow,
html body #page-pos .summary .sumrow span {font-size:19px!important;}
html body #page-pos .sumrow.total,
html body #page-pos .sumrow.total span {font-size:23px!important;}
@media (max-width:650px) {
  html body #page-pos {font-size:19px!important;}
  html body #page-pos .packing-options button,
  html body #page-pos .packing-tools button {font-size:19px!important;min-height:51px!important;}
  html body #page-pos .fake-order-item,
  html body #page-pos .fake-order-item span,
  html body #page-pos .fake-order-customer-copy p,
  html body #page-pos .fake-order-points,
  html body #page-pos .fake-order-points span,
  html body #page-pos .fake-order-points b {font-size:18px!important;}
  html body #page-pos .nommi-reward-copy p,
  html body #page-pos .nommi-reward-copy small {font-size:18px!important;}
  html body #page-pos .food-name,
  html body #page-pos .food-price,
  html body #page-pos .cart-items .empty,
  html body #page-pos .summary .sumrow {font-size:19px!important;}
}