/* Vùng an toàn cho tiêu đề popup: nút đóng là một ô riêng ở góc PHẢI,
   không nằm trên nhãn, tiêu đề hoặc nút hành động. */
#season-modal .season-paper,
#arcade-modal .arcade-paper{box-sizing:border-box;min-width:0}
#season-modal .season-paper>.modal-close,
#arcade-modal .arcade-paper>.modal-close{
  position:absolute;left:auto;right:12px;top:12px;
  width:44px;height:44px;min-width:44px;min-height:44px;
  z-index:6;display:grid;place-items:center;
}
/* Goal/Staff cài rule top/right cho nút X nhưng đã bị một rule button khác
   chuyển position:relative. Bắt buộc định vị tuyệt đối trong card có scroll. */
#goal-modal .goal-paper>.modal-close,
#staff-modal .staff-paper>.modal-close{
  position:absolute;left:auto;right:14px;top:13px;
  z-index:7;flex:none;width:44px;height:44px;min-width:44px;min-height:44px;
}
#goal-modal .goal-paper>.book-eyebrow,
#staff-modal .staff-paper>.book-eyebrow{
  min-width:0;max-width:100%;min-height:22px;
  padding-right:62px;white-space:normal;overflow-wrap:anywhere;
  line-height:1.35;
}
#goal-modal .goal-paper>h2,
#staff-modal .staff-paper>h2{
  padding-right:60px;min-width:0;max-width:100%;
  white-space:normal;overflow-wrap:anywhere;line-height:1.2;
}
#season-modal .season-paper>.book-eyebrow,
#arcade-modal .arcade-paper>.book-eyebrow{
  display:block;min-width:0;max-width:100%;
  padding-right:60px;min-height:21px;
  white-space:normal;overflow-wrap:anywhere;
  line-height:1.35;
}
#season-modal .season-paper>h2,
#arcade-modal .arcade-paper>h2{
  padding-right:60px;min-width:0;max-width:100%;
  overflow-wrap:anywhere;white-space:normal;line-height:1.2;
}
/* Danh sách đồ theo mùa: cột chữ có thể xuống dòng, giá luôn có cột
   riêng thay vì ép tên và giá phủ lên nhau. */
#season-modal .season-paper .dc-song,
#arcade-modal .arcade-paper .dc-song{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;column-gap:12px;min-width:0;
}
#season-modal .season-paper .dc-song>span,
#arcade-modal .arcade-paper .dc-song>span{min-width:0;overflow-wrap:anywhere}
#season-modal .season-paper .dc-song b,
#season-modal .season-paper .dc-song small,
#arcade-modal .arcade-paper .dc-song b,
#arcade-modal .arcade-paper .dc-song small{white-space:normal;overflow-wrap:anywhere;line-height:1.3}
#season-modal .season-paper .dc-song em,
#arcade-modal .arcade-paper .dc-song em{
  justify-self:end;margin:0;max-width:100%;white-space:normal;text-align:right;
  overflow-wrap:anywhere;
}
/* Arcade card có icon tách riêng; card mùa chỉ gồm tên và giá. */
#arcade-modal .arcade-paper button.dc-song:has(>span:nth-child(3)){
  grid-template-columns:34px minmax(0,1fr) auto;
}
#season-modal .season-paper .loto-actions .shell-primary,
#arcade-modal .arcade-paper .loto-actions .shell-primary{
  box-sizing:border-box;min-width:0;max-width:100%;
  white-space:normal;overflow-wrap:anywhere;text-align:center;line-height:1.25;
}
/* Hub có nhiều mục được bung ra: vùng nội dung phải cuộn độc lập và kết
   thúc trước footer. Trước đây card cuối phủ dưới dòng "Đã lưu tự động". */
#home-screen .home-content{
  overflow-y:auto;overflow-x:clip;
  overscroll-behavior-y:contain;scrollbar-width:thin;
  scrollbar-color:#b9936570 transparent;
  padding-bottom:12px;
}
#home-screen .home-footer{background:linear-gradient(90deg,#302015ec,#302015f2);border-radius:10px;padding:3px 10px}
#home-screen .home-save-state{white-space:nowrap}
@media(orientation:portrait) and (max-width:1100px){
  /* Tên chủ quán được đọc đủ, không giấu phần cuối bằng ellipsis. */
  #home-screen .home-topbar .owner-chip{overflow:visible;min-height:54px}
  #home-screen .home-topbar .owner-chip b{
    display:block;width:100%;max-width:76px;max-height:none;
    overflow:visible;text-overflow:clip;white-space:normal;overflow-wrap:anywhere;
    font-size:clamp(11px,3.1vw,14px);line-height:1.25;
  }
  #home-screen .home-content{
    /* CSS portrait cũ dùng position:relative và đẩy cả nội dung dài
       xuống dưới footer. Cố định viewport nội dung, rồi cuộn bên trong. */
    position:absolute;top:151px;bottom:79px;
    left:16px;transform:none;width:calc(100% - 32px);
    height:auto;max-height:calc(100dvh - 230px);
    margin:0;display:block;min-height:0;padding-bottom:20px;
  }
  #home-screen .home-story{display:flex;justify-content:flex-start;padding-top:8px}
  #home-screen .home-footer{bottom:max(8px,env(safe-area-inset-bottom));height:44px}
}
@media(orientation:landscape) and (max-height:600px){
  #home-screen .home-content{bottom:47px;margin-bottom:0;padding-bottom:12px}
  #home-screen .home-footer{bottom:max(4px,env(safe-area-inset-bottom));min-height:31px}
}
/* Các thẻ nhiệm vụ có tên dài: grid không được lấy intrinsic width
   của chữ làm tăng cột, vì sẽ nhô khỏi thẻ ở màn ngang hẹp. */
#module-screen .mission-item{min-width:0;grid-template-columns:46px minmax(0,1fr)}
#module-screen .mission-item>div{min-width:0}
#module-screen .mission-item b,
#module-screen .mission-item p,
#module-screen .mission-item small{white-space:normal;overflow-wrap:anywhere}
@media(max-width:1050px),(max-height:600px){
  #module-screen .mission-item{grid-template-columns:32px minmax(0,1fr)}
}
@media(orientation:landscape) and (max-height:500px){
  #goal-modal .goal-paper>.modal-close,
  #staff-modal .staff-paper>.modal-close{top:9px;right:9px;left:auto}
  #goal-modal .goal-paper>.book-eyebrow,
  #staff-modal .staff-paper>.book-eyebrow{padding-right:56px;min-height:19px}
  #goal-modal .goal-paper>h2,
  #staff-modal .staff-paper>h2{padding-right:56px}
  #season-modal .season-paper>.modal-close,
  #arcade-modal .arcade-paper>.modal-close{top:8px;right:8px;left:auto}
  #season-modal .season-paper>.book-eyebrow,
  #arcade-modal .arcade-paper>.book-eyebrow{padding-right:52px;min-height:18px}
  #season-modal .season-paper>h2,
  #arcade-modal .arcade-paper>h2{padding-right:52px;margin-right:0}
}
@media(max-width:480px){
  #goal-modal .goal-paper>.book-eyebrow,
  #staff-modal .staff-paper>.book-eyebrow{padding-right:58px}
  #season-modal .season-paper,
  #arcade-modal .arcade-paper{width:calc(100vw - 18px);padding:21px 16px 17px}
  #season-modal .season-paper>.book-eyebrow,
  #arcade-modal .arcade-paper>.book-eyebrow{padding-right:58px}
  #season-modal .season-paper>h2,
  #arcade-modal .arcade-paper>h2{padding-right:58px}
  #season-modal .season-paper .dc-song,
  #arcade-modal .arcade-paper .dc-song{gap:7px;padding:9px 10px}
  #season-modal .season-paper .dc-song b,
  #arcade-modal .arcade-paper .dc-song b{font-size:19px}
}
/* 360px portrait: stats need their own row instead of shrinking the
   owner chip to ~69px, which hides/overflows the profile label. */
@media(orientation:portrait) and (max-width:380px){
  #home-screen .home-topbar{
    grid-template-columns:125px minmax(0,1fr);
    grid-template-areas:'owner brand' 'stats stats';
    gap:4px 6px;
  }
  #home-screen .home-topbar .owner-chip{
    width:125px;max-width:125px;min-width:0;
  }
  #home-screen .home-topbar .owner-chip small{
    max-width:100%;font-size:11px;letter-spacing:0;white-space:nowrap;
  }
  #home-screen .home-brand{text-align:left}
  #home-screen .home-brand small{font-size:11px;letter-spacing:.07em}
  #home-screen .home-brand strong{font-size:20px}
  #home-screen .home-stats{
    width:100%;min-width:0;justify-self:stretch;
    justify-content:space-between;gap:3px;
  }
}