/* Phone controls use screen pixels, outside the scaled painted counter. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* The browser address/gesture bar can change 100dvh repeatedly during play.
   Use the stable SMALL viewport instead, so the fixed-aspect counter never
   expands and contracts merely because mobile browser chrome slides away. */
@supports (height:100svh) {
  @media (pointer:coarse) { #viewport { height:100svh; } }
}
#home-objective > strong { display: block; margin-bottom: 4px; color: #fff0d2; font-weight: 400; }
#home-objective > span { display: block; }
.mobile-game-header, .mobile-game-tools { display: none; }
#viewport > .overlay { position: fixed; z-index: 60; }

@media (pointer: coarse) {
  .app-shell button, .story-event-overlay button { touch-action: manipulation; }
  .module-body button, .home-footer button { min-height: 44px; }
  .module-back, .home-icon, .modal-close, .shell-back { min-width: 44px; min-height: 44px; }
  .app-shell input, .app-shell textarea { font-size: max(16px, 1em); }
}

@media (orientation: portrait) and (max-width: 1100px) {
  .app-screen { overscroll-behavior-y: contain; }
  .entry-book { position: relative; inset: auto; transform: none; width: calc(100% - 32px); margin: max(28px, 12dvh) auto 24px; padding: 28px 22px; }
  .entry-book > p { line-height: 1.4; }
  .entry-book footer { flex-wrap: wrap; font-size: 13px; }
  .profile-scene { min-height: 100%; height: auto; padding: max(76px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); }
  .profile-paper { width: 100%; max-width: 560px; padding: 24px 20px; }
  .profile-paper label { font-size: 16px; }
  .profile-paper input { min-height: 48px; font-size: 22px; }
  .profile-preview strong { overflow-wrap: anywhere; line-height: 1.2; }
  .form-note { font-size: 15px; }
  .home-topbar { width: calc(100% - 24px); padding: 0; margin-top: max(10px, env(safe-area-inset-top)); gap: 12px 6px; }
  .home-topbar .owner-chip { min-width: 0; width: 100%; max-width: 125px; overflow: hidden; gap: 5px; padding: 5px 8px 5px 5px; }
  .owner-chip span:last-child { flex: 1; min-width: 0; }
  .owner-chip b { width: 100%; max-width: 75px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .home-topbar .owner-mark { width: 28px; height: 28px; flex: none; font-size: 18px; }
  .home-stats { gap: 5px; }
  .home-stats .stat-pill { min-width: 40px; padding: 4px 7px; }
  .home-stats .cash-pill { min-width: 78px; }
  .home-brand strong { max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.2; font-size: 27px; }
  .home-content { width: calc(100% - 32px); margin-top: 8px; margin-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .home-story { padding-top: 6px; padding-bottom: 18px; }
  .home-story h2 { font-size: 38px; line-height: 1.15; margin: 6px 0 10px; }
  .home-story > p { font-size: 17px; line-height: 1.35; margin-bottom: 12px; }
  .next-goal { font-size: 16px; }
  .next-goal b { line-height: 1.25; }
  .open-shop-button { min-height: 62px; margin-top: 12px; }
  .hub-grid { gap: 10px; grid-auto-rows: minmax(150px, auto); }
  .home-section-heading { display: block; margin: 0 2px 8px; }
  .home-section-heading span { display: block; font-size: 19px; }
  .home-section-heading small { display: block; margin-top: 2px; font-size: 13px; }
  .home-prepare .hub-grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: minmax(145px, auto); }
  .home-prepare .hub-card { min-height: 0; padding: 14px 10px; }
  .home-prepare .hub-card:last-child { grid-column: 1 / -1; min-height: 130px; }
  .home-prepare .hub-card-copy b { font-size: 25px; }
  .home-ledger-shortcut { min-height: 66px; grid-template-columns: 54px minmax(0, 1fr) 26px; gap: 8px; margin-top: 10px; padding: 9px 12px; }
  .home-ledger-shortcut .ledger-lines { width: 46px; height: 40px; }
  .home-ledger-shortcut b { font-size: 23px; }
  .home-ledger-shortcut em { font-size: 13px; }
  .home-more { margin-top: 10px; }
  .home-screen .hub-stack { display: block; height: auto; max-height: none; }
  .home-screen .home-more[open] { display: block; height: auto; }
  .home-screen .home-more .hub-tools { position: static; height: auto; min-height: 0; overflow: visible; }
  .home-more summary { min-height: 58px; padding: 9px 12px; }
  .home-more summary b { font-size: 17px; white-space: normal; }
  .home-more .hub-tools { grid-template-columns: 1fr 1fr; padding: 8px; }
  .hub-card { padding: 14px 10px; }
  .hub-card-copy small { display: none; }
  .hub-card-copy b { font-size: 25px; line-height: 1.15; }
  .hub-card-copy em { font-size: 14px; line-height: 1.25; white-space: normal; }
  .hub-prop { top: 26px; bottom: auto; right: 12px; opacity: .6; width: 48px; height: 52px; }
  .hub-prop-box { width: 52px; }
  .hub-prop-kettle { width: 58px; }
  .hub-tools { gap: 8px; }
  .hub-tools button { min-height: 60px; }
  .hub-tools button b { font-size: 16px; }
  .hub-tools button small { font-size: 12px; }
  .home-footer { min-height: 48px; height: auto; bottom: max(6px, env(safe-area-inset-bottom)); overflow-x: auto; gap: 5px; white-space: nowrap; }
  .home-footer button { flex: none; font-size: 14px; }
  .home-save-state { font-size: 12px; flex: none; }

  /* A single scroll area under a compact header, including the market shelves. */
  .module-screen { display: flex; flex-direction: column; overflow: hidden; padding-top: env(safe-area-inset-top); }
  .module-screen[hidden] { display: none; }
  .module-topbar { position: relative; flex: none; top: auto; left: auto; transform: none; width: calc(100% - 24px); height: 76px; margin: 0 auto; padding: 8px; }
  .module-heading h2 { font-size: 27px; line-height: 1.15; }
  .module-heading p { font-size: 13px; }
  .module-wallet { min-width: 90px; }
  .module-wallet b { font-size: 21px; }
  .module-body { position: relative; flex: 1; min-height: 0; top: auto; bottom: auto; left: auto; transform: none; width: calc(100% - 24px); margin: 10px auto max(12px, env(safe-area-inset-bottom)); overflow: auto; overscroll-behavior-y: contain; }
  .module-summary span, .module-summary p, .stock-alert, .empty-note,
  .settings-sheet p, .regular-card p, .review-text, .review-thread p,
  .journey-hero p, .journey-next p, .journey-rank p, .forecast-card p,
  .haggle-card p, .preorder-card p, .staff-note, .loto-note { font-size: 16px; line-height: 1.4; }
  .module-summary b { font-size: 24px; line-height: 1.15; }
  .module-summary small, .regular-card small, .review-card small,
  .achievement .achievement-state { font-size: 11px; letter-spacing: .04em; }
  .module-body button { font-size: 16px; min-height: 44px; }
  .regular-card { grid-template-columns: 48px minmax(0, 1fr); padding: 14px; }
  .regular-card b { font-size: 22px; }
  .regular-card em, .regular-card div > span { font-size: 14px; }
  .review-card { padding: 14px; }
  .review-card header b { font-size: 19px; }
  .review-reply-form textarea { min-height: 88px; font-size: 16px; }
  .review-stars, .review-suggest-chip, .achievement p, .achievement em { font-size: 14px; }
  .achievement-grid { gap: 8px; }
  .pricing-row { gap: 5px; }
  .market-look .module-topbar { top: auto; left: auto; width: calc(100% - 16px); height: 76px; grid-template-columns: minmax(0, 1fr) auto 48px; gap: 6px; padding: 6px; }
  .market-look .module-heading { grid-column: 1; grid-row: 1; min-width: 0; padding: 0; background: none; box-shadow: none; border: 0; justify-self: start; text-align: left; }
  .market-look .module-heading:before, .market-look .module-heading:after, .market-look .module-heading p { display: none; }
  .market-look .module-heading h2 { font-size: 28px; }
  .market-look .module-wallet { grid-column: 2; grid-row: 1; margin: 0; gap: 5px; padding: 6px 8px; border-width: 2px; }
  .market-look .module-wallet:before { width: 22px; height: 24px; font-size: 18px; border-width: 1px; }
  .market-look .module-wallet b { font-size: 20px; }
  .market-look .module-back { grid-column: 3; grid-row: 1; width: 48px; height: 48px; padding: 0 0 5px; font-size: 42px; }
  .market-look .module-body { top: auto; bottom: auto; width: calc(100% - 16px); margin-top: 8px; overflow: hidden; border-width: 3px; }
  .market-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); padding: 5px; }
  .market-categories { flex-direction: row; min-width: 0; overflow-x: auto; border: 0; padding: 0 0 8px; gap: 6px; }
  .market-categories button { flex: none; white-space: nowrap; min-height: 46px; padding: 7px 10px; font-size: 17px; gap: 4px; }
  .market-categories button span { width: 22px; font-size: 20px; }
  .market-content { padding: 2px 2px 16px; }
  .market-look .stock-grid, .market-look .recipe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .market-look .stock-copy > span { font-size: 14px; line-height: 1.3; }
  .market-look .stock-alert { flex-wrap: wrap; gap: 4px; }
  .market-look .stock-market-actions button { font-size: 16px; }
  .market-overview .module-summary > div + div { display: block; }

  .shell-modal { padding: 16px; }
  .modal-paper { max-height: calc(100dvh - 32px); overflow-y: auto; padding: 28px 20px 20px; }
  #viewport > .overlay { padding: 16px; overflow-y: auto; }
  #viewport > .overlay .paper { width: min(560px, 100%); max-width: 100%; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 28px 20px 20px; }
  #viewport > .overlay .paper h2 { font-size: 32px; }
  #viewport > .overlay .paper p { font-size: 18px; line-height: 1.4; }
  #viewport > .overlay .paper button { min-height: 44px; }
  #viewport > #toast { position: fixed; top: 106px; max-width: calc(100vw - 24px); white-space: normal; font-size: 18px; }
  .mobile-game-header, .mobile-game-tools { position: fixed; z-index: 30; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: #fff1d8; border: 2px solid #9f7548; border-radius: 14px; box-shadow: 0 4px 0 #422b1d55; color: #583820; }
  .mobile-game-header { top: max(10px, env(safe-area-inset-top)); }
  .mobile-game-header > div { flex: 1; min-width: 0; }
  .mobile-game-header strong, .mobile-game-header span { display: block; }
  .mobile-game-header strong { font-size: 21px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
  .mobile-game-header span { font-size: 16px; }
  .mobile-game-header button { min-height: 44px; min-width: 64px; padding: 6px; border-radius: 10px; background: #715033; color: #fff3d8; font-size: 18px; }
  .mobile-game-tools { bottom: max(12px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: 54px minmax(0, 1fr) 54px; gap: 8px; }
  .mobile-game-tools p { grid-column: 1 / -1; margin: 0; font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
  .mobile-game-tools button { min-height: 46px; padding: 8px; border-radius: 9px; background: #ead0a4; color: #59361f; font-size: 17px; }
  .mobile-game-tools #mobile-find { background: #6c853e; color: #fff8df; }
  .mobile-game-tools button:disabled { opacity: .55; }
  #viewport:has(> .overlay:not([hidden])) > .mobile-game-header,
  #viewport:has(> .overlay:not([hidden])) > .mobile-game-tools { visibility: hidden; }
}

@media (orientation: portrait) and (max-height: 680px) {
  #viewport { align-items: flex-start; padding-top: 110px; overflow-y: auto; padding-bottom: 150px; }
}

@media (orientation: landscape) and (max-height: 600px) {
  /* Clipping must not create a scroll container around the scaled landscape stage. */
  #viewport { overflow: clip; }
  .home-story > p { font-size: 16px; line-height: 1.25; }
  .home-content { overflow-y: auto; padding-bottom: 8px; }
  .home-story { justify-content: flex-start; padding-top: 6px; }
  .module-summary span, .settings-sheet p, .review-text, .regular-card p { font-size: 14px; line-height: 1.3; }
  .review-reply-form textarea { font-size: 16px; }
  .module-body button { min-height: 44px; }
}
/* Hub's expanded activity drawer must never be locked inside the compact
   landscape 52px grid row: that hides its entire button grid below the fold.
   Let the main hub scroll vertically while preserving the fixed footer. */
@media (orientation: landscape) and (max-height: 650px) and (min-width: 701px) {
  .home-content { overflow-y: auto; min-height: 0; overscroll-behavior-y: contain; }
  .home-content .hub-stack {
    height: auto;
    max-height: none;
    align-self: start;
    grid-template-rows: auto auto;
  }
  .home-content .home-more[open] { height: auto; max-height: none; }
  .home-content .home-more[open] .hub-tools { overflow: visible; }
}

/* Compact landscape: stacked two-column market cards keep whole Vietnamese
   words readable instead of squeezing 3 headings into ~100px text columns. */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 950px) {
  .home-prepare .hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: minmax(112px, auto);
    align-content: start;
    height: auto;
    gap: 9px;
  }
  .home-prepare .hub-card { min-height: 112px; padding: 12px 14px; }
  .home-prepare .hub-card:last-child { grid-column: 1 / -1; }
  .home-prepare .hub-card-copy { max-width: calc(100% - 72px); }
  .home-prepare .hub-card:last-child .hub-card-copy { max-width: calc(100% - 94px); }
  .home-prepare .hub-card-copy b { font-size: 25px; line-height: 1.15; overflow-wrap: normal; }
  .home-prepare .hub-card-copy small { display: none; }
  .home-prepare .hub-card-copy em { font-size: 11px; line-height: 1.28; }
  .home-prepare .hub-prop { right: 10px; top: 21px; width: 70px; height: 80px; }
  .home-prepare .hub-prop-drink { top: 14px; width: 72px; height: 91px; }
  .home-prepare .hub-prop-kettle { top: 13px; width: 84px; height: 83px; }
  .home-prepare .hub-prop-box { top: 17px; }
  .home-content { scrollbar-width: thin; scrollbar-color: #bd996c77 transparent; overscroll-behavior: contain; }
  .home-content::-webkit-scrollbar { width: 5px; }
  .home-content::-webkit-scrollbar-thumb { background: #bd996c77; border-radius: 9px; }
}

/* ===== MÀN CHƠI TỰ XOAY NGANG =====
   Khi nội dung đã xoay 90°, cả quầy nằm gọn trong màn hình nên không cần thanh
   kéo ngang, không cần thanh tiêu đề riêng của màn dọc. Đặt sau các media query
   để thắng về độ ưu tiên (id + class). */
/* style.css dòng 17 ẩn hẳn màn chơi khi máy dựng đứng (cổng "xoay máy đi" cũ),
   nên chế độ tự xoay phải bật lại rõ ràng. */
html.portrait-rotated #viewport{visibility:visible;pointer-events:auto;align-items:center;justify-content:center;padding:0;overflow:clip}
html.portrait-rotated .mobile-game-header,
html.portrait-rotated .mobile-game-tools{display:none}
html.portrait-rotated #game{transform-origin:center}
/* Xoay xong tỉ lệ nhỏ hơn, nới ô chạm để ngón tay vẫn bấm trúng (120 ≈ 46px thật) */
html.portrait-rotated .station{min-width:120px;min-height:120px}

/* Hai chồng ly chỉ cách nhau 112px trong game; xoay xong còn 43px trên màn hình nên
   rất dễ bấm nhầm size. Nới mỗi vùng chạm ra PHÍA NGOÀI (ra xa nhau), chừa khoảng hở
   thật, trong khi nhãn L/M vẫn bám đúng tâm chồng ly nhờ biến --tam. Máy tính không
   đụng tới, vì ở đó khung gợi ý nét đứt phải ôm sát chồng ly. */
html.portrait-rotated #station-cup-l{--trai:230px!important;left:230px!important;width:156px!important}
html.portrait-rotated #station-cup-m{--trai:400px!important;left:400px!important;width:156px!important}
/* Vùng chạm nới rộng nhưng khung gợi ý nét đứt phải vẫn ôm sát chồng ly, nếu không
   hai khung giãn ra sát nhau trông như một ô liền, người chơi không biết đâu là L đâu là M. */
html.portrait-rotated .cup-size-choice.next:before{
  left:calc(var(--goc-trai) - var(--trai));width:var(--goc-rong);right:auto}
html.portrait-rotated .cup-size-choice.next:after{
  left:calc(var(--goc-trai) - var(--trai) + var(--goc-rong) / 2)}

/* A 320px phone scales the 1024px-tall stage to ~31%. Because the stage is
   rotated, its CSS HEIGHT becomes physical tap WIDTH and vice versa.
   Protect a >=44px minimum on narrow phones without inflating the tightly
   packed syrup bottles (their individual hitboxes must remain separate). */
@media(orientation:portrait) and (max-width:360px){
  html.portrait-rotated #game .station:not(.bottle-choice){
    min-width:144px;
    min-height:144px;
  }
  html.portrait-rotated #game #station-peanut{
    min-width:144px!important;
    min-height:144px!important;
  }
}

/* On small landscape phones (667x375), the ordinary 116px cup hitbox is
   only ~42px on screen. Expand by 4px, without moving its drawn silhouette. */
@media(orientation:landscape) and (max-width:700px) and (max-height:400px){
  #game .station:not(.bottle-choice){min-width:120px;min-height:120px}
  #game .station.cup-size-choice{min-width:120px;min-height:124px}
  #game #station-peanut{min-width:120px!important;min-height:120px!important}
}

/* Portrait rotated: the eight bottles are only 48 logical px apart, too
   close for separate finger-size hitboxes. Leave their artwork untouched,
   offer one generous touch opener and an eight-choice sheet instead. */
#mobile-bottle-open{display:none}
@media(orientation:portrait) and (max-width:1100px){
  html.portrait-rotated #game.expanded #mobile-bottle-open:not([hidden]){
    display:block;position:absolute;z-index:30;
    left:871px;top:812px;width:215px;height:146px;
    padding:14px 9px;border:3px solid #6f8d3f;border-radius:22px;
    background:linear-gradient(#f4f6d6,#d4e7b7);
    color:#4e672e;font:700 33px/1.2 Patrick,'Segoe UI',sans-serif;
    box-shadow:0 6px 0 #405b2b,inset 0 0 0 4px #fffdf1;
    touch-action:manipulation;
  }
}
#mobile-bottle-picker{position:absolute;inset:0;z-index:90;display:grid;place-items:center;padding:35px;background:#2a1911ba;pointer-events:auto}
#mobile-bottle-picker[hidden]{display:none!important}
#mobile-bottle-picker .mobile-bottle-sheet{
  width:910px;max-width:96%;padding:24px 26px 30px;
  border:5px solid #93613d;border-radius:27px;
  background:linear-gradient(#fff3d8,#f5d9a9);
  color:#51311f;box-shadow:0 11px 0 #3e2215aa,inset 0 0 0 5px #fff9e9;
}
#mobile-bottle-picker header{display:flex;justify-content:space-between;align-items:center;gap:14px}
#mobile-bottle-picker header span{font:700 41px/1.15 Patrick,'Segoe UI',sans-serif}
#mobile-bottle-picker .mobile-bottle-close{
  flex:none;width:148px;height:148px;display:grid;place-items:center;
  background:#f6e7c8;border:3px solid #b38253;border-radius:21px;
  color:#653a25;font:700 65px/1.15 Arial,sans-serif;
}
#mobile-bottle-picker p{margin:5px 0 18px;font:27px/1.2 Patrick,'Segoe UI',sans-serif}
#mobile-bottle-picker .mobile-bottle-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
#mobile-bottle-picker .mobile-bottle-option{
  min-width:0;min-height:150px;padding:14px 8px;
  border:3px solid #ad794b;border-radius:17px;
  background:linear-gradient(#fff9e9,#f2d8b0);
  color:#57371f;font:700 29px/1.25 Patrick,'Segoe UI',sans-serif;
  box-shadow:0 4px 0 #6b492b8c;touch-action:manipulation;
}
#mobile-bottle-picker .mobile-bottle-option.recommended{
  background:linear-gradient(#eff7d2,#d2e8ae);border-color:#678b42;
  color:#4b672a;box-shadow:0 4px 0 #446a33;
}
#mobile-bottle-picker .mobile-bottle-option:disabled{opacity:.43;filter:grayscale(.6)}