/* Tablet layout: spacious farm in portrait, optional activities alongside in landscape. */
@media (min-width:551px) and (max-width:1399px) {
  body { padding-bottom:calc(88px + env(safe-area-inset-bottom)); }
  .game-shell { padding:12px max(16px,env(safe-area-inset-right)) 24px max(16px,env(safe-area-inset-left)); }
  button { min-width:48px; min-height:48px; }
  .topbar { gap:12px; padding:0; }
  .brand { font-size:25px; min-width:0; }
  .brand small,.weather { display:none; }
  .round { width:48px; height:48px; flex-shrink:0; }
  .care-tools button { font-size:15px; min-height:50px; }
  .care-tools small { font-size:13px; line-height:1.5; }
  .farm-card { min-height:0; }
  .farm-nav { height:62px; }
  .farm-nav button { font-size:14px; padding:8px 14px; }
  .farm-nav .active { font-size:14px; }
  .scene { height:330px; }
  .pens { inset:70px 4% 34px; gap:4%; }
  .pen-name { font-size:14px; padding:6px 8px; }
  .pen-name small { font-size:12px; }
  .pen-manage { width:48px; height:48px; top:48px; right:0; display:grid; place-items:center; }
  .pen-status { min-height:48px; padding:8px; font-size:14px; }
  .pen-animals>.animal-art { width:29%; max-width:64px; }
  .pen-animals>.animal-art.baby { width:20%; max-width:42px; }
  .scene-caption { font-size:12px; }
  .field { width:94%; max-width:none; padding:14px; margin:10px auto 18px; }
  .field h2 { font-size:21px; }
  .text-button { min-height:48px; font-size:13px; }
  .seed-option { min-height:62px; }
  .seed-option strong { font-size:14px; }
  .seed-option small,.plot-label,.field-tip { font-size:12px; }
  .plots { gap:9px; grid-template-columns:repeat(6,minmax(0,1fr)); }
  .plot { min-width:0; min-height:80px; aspect-ratio:1; }
  .inventory { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .inventory-item span { font-size:12px; overflow-wrap:anywhere; }
  .inventory-item strong { font-size:19px; }
  .sidebar { display:flex; flex-direction:column; gap:16px; }
  .activity-fold>summary { min-height:72px; font-size:17px; }
  .activity-fold>summary small { font-size:13px; }
  .fold-content .community-strip { display:flex; flex-direction:column; }
  .mission-card,.orders-panel { grid-column:auto; grid-row:auto; }
  .order-bottom { flex-wrap:wrap; gap:10px; }
  .order-bottom button { font-size:13px; }
  .mobile-dock { position:fixed; z-index:8; inset:auto 0 0; display:grid; grid-template-columns:repeat(4,minmax(0,150px)); justify-content:center; gap:12px; padding:8px max(16px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); border-top:3px solid #ffe298; background:linear-gradient(#b67534,#82471f); box-shadow:0 -4px 18px #34521644; }
  .mobile-dock button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:54px; padding:8px; border:2px solid #fff5ce; border-radius:12px; background:linear-gradient(#fff4b7,#f5ce6a); box-shadow:0 3px #5a311b; font-size:14px; }
  .mobile-dock button span { font-size:25px; }
  .toast { bottom:calc(88px + env(safe-area-inset-bottom)); }
  dialog,.community-dialog { width:min(660px,calc(100vw - 48px)); max-height:calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding:18px 24px 24px; overscroll-behavior:contain; scroll-padding-top:65px; }
  dialog::backdrop { backdrop-filter:none; }
  .dialog-x { position:sticky; top:0; right:auto; margin-left:auto; margin-bottom:-48px; width:48px; height:48px; z-index:3; }
  #dialog-content>h2,#dialog-content>.eyebrow { padding-right:60px; }
  .dialog-art { height:100px; }
  .dialog-art .animal-art,.dialog-art svg { width:100px; height:100px; }
  dialog p,.help-list { font-size:15px; }
  dialog input { font-size:16px; min-height:48px; }
  .market-row strong { font-size:15px; }
  .market-row small,.market-row button,.animal-tabs button { font-size:13px; }
  .market-row { gap:10px; }
  .quiz-option { min-height:60px; font-size:16px; }
}
@media (min-width:551px) and (max-width:1399px) and (orientation:portrait),
       (min-width:551px) and (max-width:950px) {
  .workspace { grid-template-columns:minmax(0,1fr); }
  .sidebar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
  .optional-heading,.mission-card { grid-column:1/-1; }
  .scene { height:clamp(310px,43vw,420px); }
}
@media (min-width:951px) and (max-width:1399px) and (orientation:landscape) {
  .workspace { grid-template-columns:minmax(0,1fr) 280px; gap:18px; }
}
@media (min-width:551px) and (max-width:700px) {
  .topbar { flex-wrap:wrap; height:auto; gap:10px; }
  .brand { flex:1 1 calc(100% - 68px); order:0; font-size:24px; }
  .round { order:1; }.level-card { order:2; }.wallet { order:3; margin-left:auto; }
  .greeting { padding-top:12px; }
  .plots { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .plot { aspect-ratio:auto; height:88px; }
  .inventory { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .mobile-dock button { flex-direction:column; gap:2px; font-size:13px; }
  .sidebar { grid-template-columns:minmax(0,1fr); }
}
/* Large touch tablets can be wider than common laptop viewports. */
@media (any-pointer:coarse) and (min-width:1400px) {
  button { min-width:48px; min-height:48px; }
  .pen-manage,.dialog-x { width:48px; height:48px; }
  .text-button,.farm-nav button,.pen-status { font-size:14px; }
}
@media (min-width:951px) and (max-width:1399px) and (orientation:landscape) and (max-height:900px) {
  .topbar { height:70px; }
  .page { padding-top:10px; }
  .greeting { display:none; }
  .scene { height:280px; }
}

/* Phone and tablet dialogs remain usable after scrolling and rotating. */
@media (max-width:1399px), (any-pointer:coarse) {
  dialog,.community-dialog {
    max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overscroll-behavior:contain;
    scroll-padding-block:60px 16px;
  }
  .dialog-x {
    position:sticky; top:0; right:auto; margin-left:auto; margin-bottom:0;
    width:48px; height:48px; z-index:3; flex-shrink:0;
  }
  #dialog-content>h2,#dialog-content>.eyebrow { padding-right:0; }
  dialog input { font-size:16px; min-height:48px; }
  dialog button { min-height:48px; }
  .score-rules>summary { min-height:48px; padding-block:12px; }
  .market-row>div,.resident-card>div,.recipe-card>div { min-width:0; overflow-wrap:anywhere; }
  .rank-name { min-width:0; overflow-wrap:anywhere; }
}
@media (max-width:550px) {
  body { padding-bottom:calc(90px + env(safe-area-inset-bottom)); }
  .game-shell { padding-top:max(6px,env(safe-area-inset-top)); }
  .mobile-dock { padding-left:max(8px,env(safe-area-inset-left)); padding-right:max(8px,env(safe-area-inset-right)); }
  .toast { bottom:calc(90px + env(safe-area-inset-bottom)); }
  dialog,.community-dialog { padding:8px 14px 18px; }
  .market-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .market-row>svg { grid-column:1; grid-row:1; }
  .market-row>div { grid-column:1/-1; grid-row:1; padding-left:46px; }
  .market-row button[data-sell] { grid-column:1; }
  .market-row button[data-five] { grid-column:2; }
  .market-row button[data-all] { grid-column:3; }
}
/* A phone held sideways has tablet width, but very little vertical space. */
@media (min-width:551px) and (max-width:1399px) and (max-height:500px) and (orientation:landscape) {
  .topbar { height:58px; flex-wrap:nowrap; gap:10px; }
  .brand { flex:1; font-size:22px; }
  .brand>span:first-child { width:44px; height:44px; border-radius:14px; }
  .brand .animal-art { width:40px; height:40px; }
  .round,.level-card,.wallet { order:0; }
  .level-icon,.coin-label,.greeting { display:none; }
  .level-card { padding:5px 10px; }
  .wallet { padding:5px 10px; }
  .page { padding-top:6px; }
  .care-tools { padding:7px 10px; margin-bottom:10px; }
  .care-tools small { margin-top:4px; font-size:12px; }
  .scene { height:260px; }
  .mobile-dock { padding-block:5px max(5px,env(safe-area-inset-bottom)); }
  .mobile-dock button { min-height:44px; flex-direction:row; gap:6px; }
  .mobile-dock button span { font-size:21px; }
  .toast { bottom:calc(65px + env(safe-area-inset-bottom)); }
  dialog,.community-dialog { padding-top:8px; }
  .dialog-art { height:72px; }
  .dialog-art .animal-art,.dialog-art svg { width:72px; height:72px; }
}