/* My Little Cashier — unified retro pixel typography (2026-10-21)
   Press Start 2P is reserved for display titles; Pixelify Sans is used for
   legible game controls, transactional figures, and long Malay descriptions. */
:root {
  --mlc-pixel-text: "VT323", monospace;
  --mlc-pixel-display: "VT323", monospace;
}
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
/* Keep emoji and image icons intact; override textual font styles throughout all tabs. */
html body, html body *:not(svg):not(svg *):not(canvas):not(i[class*="icon"]) {
  font-family: var(--mlc-pixel-text) !important;
}
html body {font-size:16px;line-height:1.4;}
html body p,html body li,html body .small,html body .game-hint,
html body .day7-heading-copy p,html body .mlc-note-preview p{
  line-height:1.48;
}
html body b,html body strong,html body th,
html body button,html body .nav button,
html body .nav a,html body label{
  font-weight:400 !important;
}
/* Main display labels use an 8-bit headline font, at controlled sizes. */
html body .brand h1,
html body .hero h2,
html body .mlc-story-copy h1,
html body #cashierWelcome,
html body #mlcStoryTitle {
  font-family:var(--mlc-pixel-display) !important;
  font-weight:400 !important;
  font-size:clamp(16px,2.15vw,25px);
  letter-spacing:-.035em;
  line-height:1.52;
  overflow-wrap:anywhere;
}
html body .mlc-story-copy h1,html body #mlcStoryTitle{
  font-size:clamp(19px,2.7vw,36px);
  line-height:1.42;
  letter-spacing:-.045em;
}
html body h1,html body h2,html body h3,html body h4,html body h5,html body h6,
html body .panel-head strong,html body .fake-order-head strong,
html body .day7-task-title,html body .day7-heading-copy h3{
  font-family:var(--mlc-pixel-text) !important;
  font-weight:400 !important;
  letter-spacing:0;
  line-height:1.3;
  overflow-wrap:anywhere;
}
html body .panel h3, html body .game-panel h3,
html body .day7-heading h3,html body .day6-head h3,
html body .decor-section-head h3 {font-size:clamp(17px,1.7vw,21px);}
/* Large numerals retain clear digit spacing for handling money and change. */
html body .sumrow.total,html body .food-price,
html body .cart-line-price,html body .payment-amount,
html body .calc-display,html body .stat-card strong,
html body .day7-stats,html body .cash-change-amount {
  font-family:var(--mlc-pixel-text) !important;
  font-weight:400 !important;
  font-variant-numeric:tabular-nums;
}
html body .food-name,html body .cart-name {font-size:14px !important;line-height:1.32!important;}
html body .food-price {font-size:15px!important;}
html body .small,html body small,html body .footer,
html body .code-label {font-size:13px;}
html body .nav button,html body .nav .nav-shop-link,
html body .pill,html body .add-btn,html body .checkout-btn,
html body input,html body textarea,html body select,
html body .mlc-note-btn {letter-spacing:0!important;}
html body button,html body input,html body textarea,html body select,
html body .nav a {font-family:var(--mlc-pixel-text)!important;}
html body .mlc-press-start {
  font-family:var(--mlc-pixel-display)!important;
  font-size:clamp(11px,1.25vw,14px);
  letter-spacing:0!important;
}
html body .mlc-note-title {font-family:var(--mlc-pixel-display)!important;font-size:clamp(10px,1.25vw,14px);line-height:1.6;}
html body .mlc-note-caption,html body .mlc-note-preview p,
html body .mlc-note-btn,html body .mlc-note-close,
html body .mlc-note-footer,html body .mlc-note-ribbon {
  font-family:var(--mlc-pixel-text)!important;
}
html body .mlc-note-btn,html body .mlc-note-close {font-size:14px;}
html body .mlc-story-kicker{font-family:var(--mlc-pixel-display)!important;}
html body .mlc-story-box p,html body .mlc-story-tip,
html body .mlc-story-tagline {font-family:var(--mlc-pixel-text)!important;}
/* Keep action labels and form fields usable at narrow widths. */
html body input,html body textarea,html body select {min-width:0;}
@media (max-width:680px){
  html body{font-size:15px;}
  html body .brand h1,html body .hero h2,
  html body #cashierWelcome{font-size:clamp(14px,4vw,19px);line-height:1.5;}
  html body .mlc-story-copy h1,html body #mlcStoryTitle{font-size:clamp(18px,5.4vw,26px);}
  html body .panel h3,html body .game-panel h3,
  html body .day7-heading h3{font-size:17px;}
  html body .nav button,html body .nav .nav-shop-link{font-size:14px;}
  html body .small,html body small,html body .footer{font-size:12px;}
  html body .mlc-press-start{font-size:11px;}
  html body .mlc-note-title{font-size:11px;}
}
/* Story screen text stays short and comfortably readable. */
html body .mlc-story-box p{font-size:19px!important;line-height:1.4!important;}
html body .mlc-story-tagline{font-size:clamp(18px,1.8vw,23px);line-height:1.35;}
html body .mlc-story-tip{font-size:16px;}
@media(max-width:680px){
  html body .mlc-story-box p{font-size:17px!important;line-height:1.42!important;}
  html body .mlc-story-tagline{font-size:19px;}
  html body .mlc-story-tip{font-size:14px;}
}


/* VT323 READABILITY UPDATE — desktop, tablet and mobile.
   VT323's apparent x-height is smaller than Pixelify Sans at the same CSS size.
   Increase rendered text instead of zooming the entire interface. */
html body {font-size:22px !important; line-height:1.25;}
html body .brand-name {font-size:28px !important; line-height:1.05 !important;}
html body .nav button,html body .nav .nav-shop-link,
html body .pill,html body .add-btn,html body .checkout-btn,
html body button,html body select,html body input,html body textarea,
html body label {font-size:22px;line-height:1.12;}
html body p,html body li,html body .game-hint,
html body .mlc-note-preview p {font-size:21px; line-height:1.25;}
html body .small,html body small,html body .footer,
html body .code-label {font-size:18px !important;line-height:1.15;}
html body .brand h1,html body .hero h2,
html body #cashierWelcome,html body .mlc-story-copy h1,
html body #mlcStoryTitle {font-size:clamp(30px,3vw,42px) !important;line-height:1.06 !important;letter-spacing:0 !important;text-shadow:1px 1px 0 #f8bdd5;}
html body h1,html body h2,html body h3,html body h4,
html body .panel-head strong,html body .fake-order-head strong,
html body .day7-task-title {font-size:clamp(25px,2.2vw,32px);line-height:1.07 !important;}
html body .panel h3,html body .game-panel h3,
html body .day7-heading h3,html body .day6-head h3,
html body .decor-section-head h3 {font-size:clamp(26px,2.15vw,34px) !important;}
html body .food-name,html body .cart-name {font-size:22px !important;line-height:1.13 !important;}
html body .food-price,html body .cart-line-price,
html body .sumrow.total,html body .payment-amount,
html body .cash-change-amount {font-size:24px !important;line-height:1.05 !important;}
html body .mlc-story-box p {font-size:24px !important;line-height:1.21 !important;}
html body .mlc-story-tagline {font-size:clamp(23px,2.2vw,29px) !important;line-height:1.15 !important;}
html body .mlc-story-tip {font-size:21px !important;}
html body .mlc-press-start {font-size:24px !important;line-height:1.0 !important;}
html body .mlc-note-title {font-size:clamp(24px,2vw,30px) !important;line-height:1.06 !important;}
html body .mlc-note-caption,html body .mlc-note-preview p {font-size:22px !important;line-height:1.23 !important;}
html body .mlc-note-btn,html body .mlc-note-close {font-size:22px !important;}
html body .mlc-note-ribbon,html body .mlc-note-footer {font-size:17px !important;}
/* Avoid a one-line title or controls forcing horizontal scroll. */
html body .panel,html body .card,html body .page {min-width:0;}
html body button,html body label {overflow-wrap:break-word;}
@media (max-width:760px){
  html body {font-size:21px !important;}
  html body .nav button,html body .nav .nav-shop-link,
  html body button,html body select,html body input,html body textarea,
  html body label {font-size:21px;}
  html body .brand h1,html body .hero h2,
  html body #cashierWelcome {font-size:clamp(28px,6vw,36px) !important;}
  html body .mlc-story-copy h1,html body #mlcStoryTitle {font-size:clamp(30px,7vw,38px) !important;}
  html body .panel h3,html body .game-panel h3,
  html body .day7-heading h3 {font-size:27px !important;}
  html body .small,html body small,html body .footer {font-size:17px !important;}
  html body .mlc-story-box p {font-size:21px !important;line-height:1.22 !important;}
  html body .mlc-story-tagline {font-size:22px !important;}
  html body .mlc-story-tip {font-size:19px !important;}
  html body .mlc-press-start {font-size:23px !important;}
  html body .mlc-note-title {font-size:25px !important;}
}