@media (max-width:760px){
  .brand-name{font-size:22px}
  .brand-btn{padding:8px 14px 9px}
  .icon-btn .lbl{display:none}
  .room-inner{grid-template-columns:minmax(0,1fr)}
  .room-scene{min-height:340px;border-right:0;border-bottom:3px solid var(--outline)}
  .room-scene{min-height:200px;height:200px;--avl:2cqw;--avw:min(42cqw,92cqh);--avtop:3cqh}
  .rb-rug{width:156px;bottom:15cqh}
  .room-card{padding:14px 20px 0;gap:10px;justify-content:flex-start}
  .room-concern{font-size:14px}
  .room-step{font-size:36px}
  .room-tagline{font-size:15px}
  .room-facts{font-size:14px}
  .room-picks{grid-template-columns:1fr 1fr}
  .room-picks button{font-size:12.5px}
  .room-picks button img{height:64px;max-width:72px}
  /* Phones: the step title and benefit icons sit beside the avatar. */
  .room-inner{position:relative}
  .room-scene{height:var(--sceneh);min-height:0;--sceneh:232px;--avw:min(40cqw,86cqh)}
  .room-head{position:absolute;z-index:4;top:12px;left:calc(40vw + 10px);right:8px;gap:2px;padding:6px 10px 8px;border-radius:14px;background:rgba(255,251,240,.86);border:2px solid rgba(122,85,53,.18)}
  .room-head::before{content:"";float:right;width:42px;height:36px}
  .room-head .room-tagline,.room-head .room-product-label{display:none}
  .room-head .room-concern{font-size:12px}
  .room-head .room-step{font-size:26px;line-height:1;margin-bottom:6px}
  .room-benefits{grid-template-columns:1fr;gap:3px;font-size:12.5px;line-height:1.2}
  html[lang^="zh"] .room-head .room-benefits{grid-template-columns:1fr 1fr;gap:4px 6px}
  .room-benefits li{gap:6px}
  .ben-ic{width:22px;height:22px}
  .room-actions{position:sticky;bottom:0;margin:4px -20px 0;padding:9px 20px calc(10px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:2px solid #E8D6B0}
  .room-actions{gap:8px}
  .room-actions button{flex:1 1 auto;white-space:nowrap;padding:10px 12px;font-size:14px}
  .room-actions #roomBack{flex:1 1 0}
  .room-actions #roomPrev,.room-actions #roomNext{flex:0 0 52px;padding:0;min-height:44px;font-size:34px;font-weight:700;line-height:1;padding-bottom:4px}
  .hint{font-size:13px;padding:10px 14px}
  .hint b{font-size:16px}
  .moods{max-height:calc(100% - 110px)}
  body.moods-open .hint{opacity:0;pointer-events:none}
  /* At a cottage door (e.g. arriving from a QR link) the prompt sheet takes the bottom, so the tap-to-move tip sits under the top buttons */
  body.docked .hint{top:calc(108px + env(safe-area-inset-top,0px));bottom:auto}
  body.docked.hint-low .hint{top:auto;bottom:calc(var(--dock-h,190px) + 30px + env(safe-area-inset-bottom,0px))}
  body.help-open .hint{opacity:1;pointer-events:auto}
  body.help-open .prompt.docked{display:none}
  /* On phones the cottage prompt docks to the bottom like a sheet so it never covers the header or the cottage */
  .prompt.docked{top:auto!important;left:50%!important;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(460px,calc(100vw - 32px));white-space:normal;padding:12px 18px 14px;gap:2px}
  .prompt.docked::after{display:none}
  .prompt.docked .prompt-step{font-size:24px}
  .prompt.docked .prompt-concern{font-size:13px}
  .prompt.docked .prompt-tip{display:block;margin-top:4px;font-size:13px;font-weight:700;line-height:1.4;color:var(--ink-soft)}
  .prompt.docked button{margin-top:10px;font-size:16px;padding:10px 30px}
}
@media (max-width:760px) and (max-height:500px){
  body.docked:not(.help-open) .hint{opacity:0;pointer-events:none}
  .prompt.docked{flex-direction:row;align-items:center;gap:14px;width:auto;max-width:calc(100vw - 32px);padding:8px 10px 8px 18px;bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .prompt.docked .prompt-step{font-size:20px}
  .prompt.docked .prompt-tip{display:none}
  .prompt.docked button{margin-top:0;padding:8px 20px}
}
@media (max-width:760px){
  /* On phones the Skin Moods label becomes a speech bubble pinned to its button */
  .mood-bubble{display:block;position:absolute;top:calc(100% + 12px);right:-4px;padding:5px 11px 6px;background:var(--paper);border:2.5px solid var(--outline);border-radius:12px;box-shadow:0 3px 0 var(--outline);font-family:var(--display);font-style:italic;font-weight:600;font-size:14px;line-height:1.1;white-space:nowrap;pointer-events:none;animation:bob 2.6s ease-in-out infinite}
  .mood-bubble::before{content:"";position:absolute;top:-8px;right:22px;width:12px;height:12px;background:var(--paper);border-left:2.5px solid var(--outline);border-top:2.5px solid var(--outline);transform:rotate(45deg)}
  #moodsToggle[aria-expanded="true"] .mood-bubble{display:none}
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (max-width:480px){
  .icon-btn{height:46px;min-width:46px;padding:0 9px}
  .icon-btn svg{width:25px;height:25px}
  .icons{gap:6px;right:12px}
  .brand{left:12px}
  .brand-btn{padding:7px 11px 8px}
  .brand-menu{min-width:200px}
  .brand-sub{display:none}
  .brand-name{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .hint,.fade,.loading,.icon-btn{transition:none}
  .mood-bubble{animation:none}
}