/* Phone and tablet refinements. Desktop composition stays in home.css. */
@media (max-width:900px) {
  body.peplive-home { background-color:#071e60; -webkit-text-size-adjust:100%; }
  .hp-shell { padding-bottom:calc(88px + env(safe-area-inset-bottom,0px)); }
  .hp-header {
    display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto auto;
    height:auto; min-height:120px; padding:16px 16px 18px; gap:14px 12px; align-content:start;
  }
  .hp-brand { grid-column:1; grid-row:1; max-width:none; min-width:0; gap:10px; }
  .hp-brand>span:last-child { min-width:0; }
  .hp-brand strong { font-size:19px; letter-spacing:0; }
  .hp-brand small { font-size:10px; letter-spacing:0; margin-top:4px; color:#b5caee; }
  .hp-logo { width:42px; height:44px; box-shadow:0 0 16px #267efe70,inset 0 0 8px #ffffff50; }
  .hp-header-actions { position:static; grid-column:2; grid-row:1; align-self:center; }
  .hp-header-actions .hp-icon-button { min-width:44px; height:44px; background:#123776c9; border-color:#78aaff50; }
  .hp-resources {
    grid-column:1/-1; grid-row:2; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%; margin:0; gap:8px;
  }
  .hp-resources .hp-resource { min-width:0; height:36px; padding:6px 8px; gap:7px; border-radius:11px; background:#0b2869c9; box-shadow:none; border-color:#5485d861; }
  .hp-resources .hp-resource strong { font-size:13px; font-variant-numeric:tabular-nums; }
  .hp-resources .hp-art { width:20px; height:20px; }
  .hp-layout,.hp-shell[data-page="farm"] .hp-layout { padding:0 16px 16px; }
  .hp-panel { border-radius:20px; border-color:#6499e969; background:linear-gradient(135deg,#0b2c72ee,#112568ed); box-shadow:inset 0 1px 0 #c7e5ff0a; }
  .hp-panel-head { gap:10px; margin-bottom:14px; }
  .hp-panel-head h2 { font-size:19px; line-height:1.3; letter-spacing:.2px; }
  .hp-panel-head .hp-link { min-height:36px; }
  .hp-primary { box-shadow:inset 0 1px 0 #ffffff40,0 3px 10px #06195640; }
  .hp-link { font-size:12px!important; }

  /* Two compact introduction cards leave the island as the main visual. */
  .hp-farm-page { gap:14px; }
  .hp-mobile-intro { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
  .hp-mobile-intro .hp-self,.hp-mobile-intro .hp-invite { height:88px; padding:8px; border-radius:17px; }
  .hp-mobile-intro .hp-self { gap:6px; text-align:left; }
  .hp-mobile-intro .hp-self>img { width:44px; height:66px; object-fit:contain; flex-shrink:0; }
  .hp-mobile-intro .hp-self strong { font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .hp-mobile-intro .hp-self b { font-size:12px; margin:7px 0 0; }
  .hp-mobile-intro .hp-self .hp-online { font-size:10px; margin-top:4px; }
  .hp-mobile-intro .hp-self small:last-child { display:none; }
  .hp-mobile-intro .hp-invite { gap:4px; background:linear-gradient(120deg,#22257cdd,#242077e8); }
  .hp-mobile-intro .hp-invite>img { width:48px; height:64px; margin:0; object-fit:contain; }
  .hp-mobile-intro .hp-invite>div { min-width:0; }
  .hp-mobile-intro .hp-invite h2 { font-size:14px; white-space:nowrap; }
  .hp-mobile-intro .hp-invite p { display:none; }
  .hp-mobile-intro .hp-invite .hp-primary { min-height:36px; padding:6px 9px; margin-top:7px; font-size:11px; border-radius:11px; }
  .hp-maps { height:78px; gap:9px; padding:2px; margin:0; scroll-snap-type:x proximity; scrollbar-width:none; }
  .hp-maps::-webkit-scrollbar { display:none; }
  .hp-map { flex:0 0 156px; gap:6px; padding:7px; scroll-snap-align:start; background:#0c2a6ed9; border-color:#628feb60; }
  .hp-map img { width:56px; height:54px; object-fit:contain; flex-shrink:0; }
  .hp-map strong { font-size:12px; }
  .hp-map small { font-size:10px; margin-top:5px; }
  .hp-map.selected { border:1px solid #67efff; background:linear-gradient(120deg,#056ba8,#204bbc); box-shadow:inset 0 0 12px #45d9ff39,0 0 8px #33beff26; }
  .hp-map em { font-size:8px; box-shadow:none; }
  .hp-farm-stage { height:clamp(286px,80vw,420px); margin:-3px -16px -5px; }
  .hp-farm-stage #sceneWrap { height:100%; min-height:0; }
  .hp-farm-stage .camera-controls { top:10px; right:12px; padding:3px; border-radius:18px; background:#092762cf; border-color:#8ab8ff55; }
  .hp-farm-stage .camera-controls button { width:38px; height:38px; }
  .hp-farm-stage .camera-controls span { font-size:10px; }
  .hp-farm-actions { min-height:78px; gap:8px; }
  .hp-farm-action { padding:9px 3px; gap:6px; border-radius:17px; flex-direction:column; text-align:center; border-color:#c6eeff80; }
  .hp-farm-action>.hp-art { width:27px; height:27px; }
  .hp-farm-action strong { font-size:14px; line-height:1.3; white-space:nowrap; }
  .hp-farm-action small { display:none; }
  .hp-farm-action.plant { box-shadow:inset 0 0 10px #ffffff28,0 5px 15px #02be8a22; }
  .hp-farm-action.water { box-shadow:inset 0 0 10px #ffffff28,0 5px 15px #3989ff22; }
  .hp-farm-action.harvest { box-shadow:inset 0 0 10px #ffffff28,0 5px 15px #ffc44b22; }
  .hp-farm-action.visit { box-shadow:inset 0 0 10px #ffffff28,0 5px 15px #9057ff22; }
  .hp-farm-market { padding:16px; }
  .hp-farm-market .hp-quick-sale { max-width:none; gap:10px; padding:10px; }
  .hp-farm-market .hp-quick-sale strong { font-size:14px; }
  .hp-farm-market .hp-quick-sale p { font-size:11px; }
  .hp-farm-market .hp-quick-sale button { min-height:36px; font-size:11px; padding:7px 12px; }
  .hp-inventory-value { position:static; width:auto; flex-direction:row; justify-content:space-between; margin-top:12px; padding-top:10px; border:0; border-top:1px solid #83acff26; border-radius:0; background:none; font-size:11px; }
  .hp-inventory-value strong { font-size:14px; }
  .hp-tip { padding:14px; gap:10px; }
  .hp-tip p { font-size:12px; line-height:1.65; }

  /* Keep rewards, progress and the next action distinct on a narrow screen. */
  .hp-task-main { gap:14px; }
  .hp-task-hero { height:124px; padding:14px 2px; border-radius:16px; }
  .hp-task-hero>div { position:relative; z-index:1; max-width:66%; }
  .hp-task-hero h1 { display:flex; align-items:center; gap:9px; margin:10px 0 9px; font-size:27px; line-height:1.3; }
  .hp-task-hero h1 .hp-icon { width:25px; height:27px; color:#a7e5ff; }
  .hp-task-hero p { max-width:210px; font-size:12px; line-height:1.7; color:#c2d6f5; }
  .hp-task-hero>img { top:0; right:-22px; width:54%; height:138px; opacity:.9; mask-image:linear-gradient(90deg,transparent,#000 30%); }
  .hp-task-tabs { border-radius:17px; padding:4px; gap:4px; background:#092561e8; border-color:#6797df6b; }
  .hp-task-tabs button { min-height:62px; padding:8px 4px; gap:6px; border-radius:13px; font-size:15px; }
  .hp-task-tabs button b { display:flex; font-size:20px; }
  .hp-task-tabs button .hp-icon { width:21px; height:23px; }
  .hp-task-tabs small { font-size:10px; margin-top:5px; }
  .hp-task-tabs button.active { box-shadow:inset 0 1px 0 #ffffff50,0 2px 9px #09184955; }
  .hp-task-checkin,.hp-today,.hp-challenges { padding:16px; }
  .hp-task-checkin .hp-panel-head { margin-bottom:9px; }
  .hp-task-checkin .hp-primary { min-height:44px; font-size:12px; padding:8px 12px; border-radius:12px; }
  .hp-task-checkin>.hp-muted { font-size:11px; line-height:1.6; }
  .hp-task-checkin .hp-primary:disabled { opacity:1; color:#76efd1; border-color:#4ddbb14d; background:#16495280; box-shadow:none; }
  .hp-checkin-days { gap:5px; margin-top:14px; }
  .hp-checkin-days>div { min-width:0; gap:8px; padding:9px 1px; border-radius:11px; background:#10336e9c; }
  .hp-checkin-days b { display:flex; justify-content:center; align-items:center; height:25px; font-size:24px; }
  .hp-checkin-days .hp-art { width:24px; height:24px; }
  .hp-checkin-days small { font-size:10px; }
  .hp-checkin-days>div.done { background:#095b6599; box-shadow:inset 0 0 12px #17dcb52b; border-color:#39d6bf; }
  .hp-today .hp-panel-head { flex-wrap:wrap; gap:7px; }
  .hp-countdown { font-size:11px; font-variant-numeric:tabular-nums; }
  .hp-mission { grid-template-columns:40px minmax(0,1fr) 78px; grid-template-areas:"icon copy reward" "icon copy action"; gap:8px 10px; min-height:112px; padding:13px 12px; margin-top:10px; border-radius:16px; background:#12367299; }
  .hp-mission>.hp-item-icon { grid-area:icon; width:40px; height:44px; border-radius:12px; align-self:center; }
  .hp-mission-copy { grid-area:copy; min-width:0; }
  .hp-mission strong { font-size:14px; line-height:1.45; }
  .hp-mission p { font-size:11px; line-height:1.55; margin:3px 0 9px; }
  .hp-mission>.hp-reward { grid-area:reward; font-size:13px; align-self:center; justify-self:center; }
  .hp-mission>.hp-primary { grid-area:action; min-height:44px; min-width:78px; padding:8px 10px; font-size:12px; border-radius:11px; }
  .hp-mission>.hp-primary:disabled { opacity:1; background:#0b4d5975; color:#8ae5ce; border-color:#59d4b530; box-shadow:none; }
  .hp-progress-row { gap:9px; }
  .hp-progress-row small { font-size:11px; font-variant-numeric:tabular-nums; }
  .hp-progress { height:6px; background:#32528b; }
  .hp-challenges>div { gap:10px; }
  .hp-challenges button { padding:10px; min-height:104px; }
  .hp-challenges button>img { width:45px; height:58px; }
  .hp-challenges strong { font-size:13px; line-height:1.5; }
  .hp-challenges p { font-size:10px; line-height:1.6; }
  .hp-challenges small { font-size:10px; }
  .hp-challenges button>.hp-icon { display:none; }

  .hp-market-page,.hp-profile-page { gap:14px; }
  .hp-profile-page { grid-template-rows:none; grid-auto-rows:auto; }
  .hp-profile-person>div { min-width:0; }
  .hp-profile-person h2 { overflow-wrap:anywhere; }
  .hp-market-tabs button { min-height:44px; font-size:16px; }
  .hp-categories { overflow-x:auto; scrollbar-width:none; padding-bottom:3px; }
  .hp-categories button { flex:0 0 auto; min-height:40px; padding:8px 14px; font-size:12px; }
  .hp-categories::-webkit-scrollbar { display:none; }
  .hp-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .hp-product { padding:12px; }
  .hp-product-top .hp-item-icon { width:58px; height:60px; }
  .hp-product h3 { font-size:14px; }
  .hp-product-stock { gap:9px; }
  .hp-product-stock>span { font-size:11px; }
  .hp-product-stock .hp-primary { min-height:40px; }
  .hp-product-stock .hp-mobile-price { font-size:13px; }
  .hp-market-inventory .hp-inventory-grid { overflow-x:auto; flex-wrap:nowrap; }
  .hp-market-inventory .hp-inventory-grid button { flex:0 0 70px; }
  .hp-profile-settings>div { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .hp-profile-settings button { flex-direction:row; text-align:left; gap:10px; padding:12px; }
  .hp-profile-settings strong { font-size:12px; }
  .hp-profile-settings small { font-size:10px; line-height:1.5; }
  .hp-profile-logs .hp-audits p { font-size:12px; }

  /* Reserve safe-area space so Safari's controls never cover the final card. */
  .hp-bottom-nav {
    height:calc(66px + env(safe-area-inset-bottom,0px)); padding:6px 12px calc(6px + env(safe-area-inset-bottom,0px));
    gap:10px; border-radius:22px 22px 0 0; background:#081f5aed; border:1px solid #759eee50;
    box-shadow:0 -6px 24px #03133444; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  }
  .hp-bottom-nav button { min-height:52px; font-size:11px; gap:3px; border-radius:14px; }
  .hp-bottom-nav .hp-icon { width:24px; height:24px; }
  .hp-bottom-nav button.active { background:linear-gradient(135deg,#2476e74d,#6441d878); border-color:#7dadff66; box-shadow:inset 0 1px 0 #b8e1ff33; color:#fff; }
  .hp-bottom-nav button.active .hp-icon { filter:drop-shadow(0 0 4px #9fcfff70); }
  .hp-toast { bottom:calc(80px + env(safe-area-inset-bottom,0px)); max-width:calc(100vw - 32px); }
  .peplive-home .notification-center { padding:16px; border-radius:20px; }
  .peplive-home .notification-head>button { width:44px; height:44px; flex-shrink:0; }
  .peplive-home .notification-tools { font-size:12px; }
  .peplive-home .notification-tools button { min-height:44px; font-size:12px; }
  .peplive-home .notification-list { gap:10px; }
  .peplive-home .notification-item { padding:13px 12px; }
  .peplive-home .notification-item strong { font-size:13px; }
  .peplive-home .notification-item span { font-size:12px; line-height:1.6; }
  .peplive-home .notification-item time { font-size:10px; }
}
@media (max-width:360px) {
  .hp-header { padding-left:12px; padding-right:12px; gap:12px 8px; }
  .hp-brand { gap:8px; }
  .hp-brand strong { font-size:16px; }
  .hp-brand small { font-size:8px; }
  .hp-logo { width:37px; height:40px; }
  .hp-layout,.hp-shell[data-page="farm"] .hp-layout { padding-left:12px; padding-right:12px; }
  .hp-mobile-intro { gap:8px; }
  .hp-mobile-intro .hp-self,.hp-mobile-intro .hp-invite { padding:6px; gap:3px; }
  .hp-mobile-intro .hp-self>img { width:35px; }
  .hp-mobile-intro .hp-invite>img { width:35px; }
  .hp-mobile-intro .hp-invite h2 { font-size:13px; }
  .hp-farm-actions { gap:6px; }
  .hp-farm-action strong { font-size:12px; }
  .hp-task-hero h1 { font-size:24px; }
  .hp-task-hero p { font-size:11px; }
  .hp-task-tabs small { font-size:9px; }
  .hp-task-tabs button { gap:4px; font-size:14px; }
  .hp-task-tabs button .hp-icon { width:18px; }
  .hp-task-checkin,.hp-today,.hp-challenges { padding:12px; }
  .hp-mission { grid-template-columns:40px minmax(0,1fr) auto; grid-template-areas:"icon copy copy" ". reward action"; gap:8px; padding:11px 10px; }
  .hp-checkin-days small { font-size:9px; }
  .hp-challenges>div { grid-template-columns:1fr; }
}
@media (min-width:601px) and (max-width:900px) {
  .hp-header,.hp-layout { max-width:760px; margin:auto; }
  .hp-product-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .hp-farm-stage { height:420px; }
  .hp-bottom-nav { padding-left:max(12px,calc((100vw - 720px)/2)); padding-right:max(12px,calc((100vw - 720px)/2)); }
}