/* Phone layout: store context → invitation → real AI → offer → details → discovery. */
@media(max-width:767px){
 body{background:#fcfaf8}
 header{min-height:66px;height:auto;flex-wrap:nowrap;gap:8px;padding:10px 12px;background:#fffdfa;position:relative;z-index:5}
 header>.header-brand{gap:4px;min-width:0;flex:1;margin:0}header .pb-logo{width:72px;height:34px}header .brand-title{font-size:13px;white-space:nowrap}
 header>nav{display:none}header>.wallet-button{order:2;font-size:11px;padding:8px 10px;gap:4px;white-space:nowrap}header>.wallet-button svg{width:15px}
 .mobile-menu{display:block;order:3;position:relative;flex-shrink:0}.mobile-menu summary{display:grid;place-items:center;list-style:none;width:32px;height:38px;font-size:22px;cursor:pointer;color:#332950}.mobile-menu summary::-webkit-details-marker{display:none}.mobile-menu summary:focus-visible{outline:2px solid var(--purple);outline-offset:2px;border-radius:6px}.mobile-menu-panel{position:absolute;right:0;top:45px;width:170px;display:grid;padding:8px;background:#fff;border:1px solid #eadff3;border-radius:13px;box-shadow:0 8px 25px #38234420}.mobile-menu-panel a,.mobile-menu-panel button{display:block;text-align:left;padding:13px 12px;font-size:14px;color:#44325c}.mobile-menu[open] summary{color:var(--purple)}
 main{padding:0 10px}#hero{padding:16px 10px 20px;gap:16px;border-radius:0 0 20px 20px;background:radial-gradient(ellipse at 95% 2%,#ffe4d4,transparent 38%),#fcf8f2;grid-template-columns:minmax(0,1fr)}
 .mobile-store-intro{display:block;grid-row:1}.mobile-store-intro .merchant-type{font-size:10px;padding:4px 9px}.mobile-store-intro h2{font-size:22px;line-height:1.4;letter-spacing:-.5px;margin:7px 0;font-weight:800;overflow-wrap:anywhere}.mobile-store-intro p{display:flex;align-items:center;gap:5px;font-size:12px;margin:0;color:#59535b}.mobile-store-intro svg{color:#d3465b}
 #hero>.merchant-welcome{grid-row:2}#hero .experience-eyebrow{display:none}.merchant-welcome h1{font-size:29px;line-height:1.25;margin:0 0 12px;letter-spacing:-.8px;text-wrap:balance}.merchant-welcome h1>em{color:#ce4055}.merchant-welcome>.desktop-welcome-description{display:none}.merchant-welcome>.mobile-welcome-description{display:block;font-size:14px;line-height:1.65;margin:0;color:#302b30}.merchant-features{gap:6px;margin:12px 0 3px}.merchant-features li{font-size:11px;padding:6px 10px;border-color:#f1e4de;background:#ffffffc9}
 .hero-agent-column{grid-row:3}.agent-hero{border-width:3px;border-radius:20px;box-shadow:0 5px 18px #61362310}.experience-stage{height:auto;aspect-ratio:1/1.06}.experience-video{object-fit:cover;object-position:center 35%}.experience-identity{top:12px;left:12px;right:85px}.experience-identity b{font-size:12px;line-height:1.45}.experience-identity>span{font-size:11px;margin-top:4px}.experience-media-controls{top:12px;right:10px}.experience-media-controls button{font-size:10px;padding:7px 9px}.experience-invite{width:238px;max-width:79%;bottom:12px;left:10px;font-size:12px;line-height:1.55;padding:11px 13px;border-radius:14px 14px 14px 3px}.experience-invite>span:last-child{margin-top:3px}.experience-main-cta{font-size:14px;line-height:1.5;min-height:46px;margin:7px 5px;padding:11px 9px}
 .hero-agent-column .hero-controls{height:30px;margin-top:8px;gap:18px;font-size:11px}.hero-agent-column .hero-controls .circle{min-width:30px;min-height:30px;width:30px;height:30px}
 #hero>.experience-info{display:flex;flex-direction:column;gap:16px;min-height:0}#hero>.experience-info>.merchant-type,#hero>.experience-info>h2,#hero>.experience-info>.merchant-tagline,#hero>.experience-info>.merchant-location{display:none}
 #hero .agent-offer{grid-row:4;margin:0 0 8px;border-radius:20px;min-width:0;width:100%;box-shadow:0 5px 16px #6f41300a}#hero .agent-offer>.offer-ticket{min-height:112px;padding:14px}#hero .agent-offer>.offer-ticket p{font-size:14px}#hero .agent-offer>.offer-cta{min-height:44px;font-size:15px}#hero .agent-offer>small{font-size:10px;line-height:1.7}
 .mobile-store-detail{display:block;grid-row:5;border:1px solid #f0e6df;border-radius:17px;padding:18px;background:#fffdfb;box-shadow:0 5px 12px #41231805}.mobile-store-detail>span{font-size:12px;color:#74616a}.mobile-store-detail>h2{font-size:21px;line-height:1.5;margin:8px 0 10px;overflow-wrap:anywhere;color:#242428}.mobile-store-detail>p{font-size:13px;line-height:1.8;color:#776a70;margin:0 0 16px}.mobile-store-detail>a{border-top:1px solid #eee5df;padding-top:13px;display:flex;justify-content:space-between;font-size:14px;color:#312b35;font-weight:700}
 .host-rail-section{grid-row:6;position:relative;padding-top:18px;border-top:1px solid #eee0d7;margin-top:6px}.mobile-rail-heading{display:block;font-size:19px;margin:0 110px 16px 0;line-height:1.5;color:#26252c}#hero .host-rail{border:0;margin:0;padding:0 0 9px;gap:10px;display:flex;overflow-x:auto;scroll-snap-type:x proximity;align-items:stretch;scrollbar-width:thin}#hero .host-rail .host-option{flex:0 0 128px;flex-direction:column;align-items:stretch;gap:0;padding:0;border:1px solid #eee2dd;border-radius:12px;background:#fff;overflow:hidden;scroll-snap-align:start;min-height:175px}#hero .host-rail .host-option.active{border-color:#d54e65;box-shadow:0 2px 8px #c33f5a15}#hero .host-rail .rail-avatar{width:100%;height:120px;border-radius:0}#hero .host-rail .rail-avatar video{object-fit:cover;object-position:center 25%}#hero .host-rail .host-option>span{padding:9px 9px 11px;min-width:0}#hero .host-rail .host-option b{font-size:12px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}#hero .host-rail .host-option small{font-size:10px;margin-top:4px}#hero .host-rail .next-batch{position:absolute;right:0;top:14px;width:auto;min-height:34px;max-width:112px;border:0;background:transparent;font-size:13px;color:#c64258;padding:5px 0;display:flex;align-items:center;gap:7px}
 .mobile-invitation{display:block;margin:22px 0 0;padding:23px;border-radius:18px;background:linear-gradient(125deg,#ece7fb,#fff0dc);border:1px solid #eee4e6}.mobile-invitation>span{font-size:11px;color:#8b6b86}.mobile-invitation h2{font-size:23px;color:#253354;line-height:1.5;margin:9px 0}.mobile-invitation p{font-size:13px;line-height:1.7;color:#796c80}.mobile-invitation>a{display:flex;align-items:center;gap:10px;color:#7043bd;font-size:14px;font-weight:700;margin-top:17px}
 .journey{padding:25px 8px;display:grid;grid-template-columns:1fr 12px 1fr 12px 1fr;gap:2px;align-items:center;background:linear-gradient(#fcfaf8,#fff4e4);border-radius:0 0 16px 16px}.journey:before{content:'簡單三步驟，開啟你的驚喜旅程';grid-column:1/-1;text-align:center;font-size:15px;font-weight:700;color:#352e37;margin-bottom:18px}.journey>span{display:flex;flex-direction:column;gap:7px;text-align:center;font-size:10px;line-height:1.5;color:#463b48}.journey svg{display:block;order:-1;width:44px;height:44px;padding:10px;background:white;border:1px solid #f0e0d7;border-radius:50%;color:#d64a60;box-sizing:content-box}.journey b{font-size:10px;color:#968298}.journey>i{font-size:15px;color:#c7afa4}
 footer{flex-direction:column;text-align:center;align-items:center;gap:9px;padding:25px 15px;background:#fffcfa}footer .header-brand{justify-content:center}footer p{margin:3px 0;font-size:12px}footer .footer-wallet{font-size:12px}
}
@media(max-width:360px){header{gap:5px;padding:9px 8px}header .pb-logo{width:61px}header .brand-title{font-size:11px}header>.wallet-button{font-size:10px;padding:7px}header>.wallet-button svg{width:13px}.mobile-menu summary{width:27px;font-size:20px}.mobile-store-intro h2{font-size:20px}.merchant-welcome h1{font-size:26px}.merchant-welcome>.mobile-welcome-description{font-size:13px}.experience-invite{font-size:11px}.experience-main-cta{font-size:12px}.mobile-invitation h2{font-size:21px}.journey svg{width:34px;height:34px}}
@media(max-width:620px){#hero>.mobile-store-intro,#hero>.merchant-welcome,#hero>.hero-agent-column,#hero .agent-offer,#hero .mobile-store-detail,#hero>.host-rail-section{grid-column:1;min-width:0}}
@media(max-width:620px){#hero{row-gap:12px}.merchant-welcome h1{font-size:27px}.experience-stage{aspect-ratio:1/.98}.hero-agent-column .hero-controls{display:none}}
@media(max-width:360px){.merchant-welcome h1{font-size:25px}}
/* Keep phone flow independent of desktop/tablet grid placement. */
@media(max-width:767px){
 html,body{width:100%;margin:0}main{min-width:0}
 #hero{display:flex;flex-direction:column;align-items:stretch;row-gap:16px}
 #hero>*{min-width:0;width:100%;max-width:100%;box-sizing:border-box}
 #hero .experience-info{width:100%;min-width:0;min-height:0;align-self:stretch}
 #hero .agent-offer,#hero .mobile-store-detail{box-sizing:border-box;max-width:100%;min-width:0}
 #hero .host-rail-section{min-width:0;overflow:visible}
 #hero .host-rail{width:100%;max-width:100%;box-sizing:border-box}
 .hero-agent-column .hero-controls{display:none}
 .experience-stage{height:auto;aspect-ratio:1/.98}
 .merchant-welcome h1{font-size:clamp(25px,6.7vw,36px)}
 dialog{max-width:calc(100vw - 16px);box-sizing:border-box}
}
/* Readability for the merchant rail, journey and discovery cards. */
#hero .host-rail .host-option b{font-size:14px;line-height:1.55}
#hero .host-rail .host-option small{font-size:12px;line-height:1.5}
.journey{font-size:16px}.journey b{font-size:14px}.journey svg{width:21px;height:21px}
.store-card .avatar-tag{font-size:12px;line-height:1.5;max-width:calc(100% - 20px)}
.store-card .card-speech{font-size:14px;line-height:1.6;max-height:112px}
.store-card .card-meta{font-size:13px;line-height:1.5}
.store-card .card-body h3{font-size:18px;line-height:1.5;height:auto;min-height:54px}
.card-actions .card-service,.card-actions .card-cta{font-size:14px;min-height:46px;white-space:normal}
.card-actions .card-cta{flex-basis:128px}
@media(max-width:1100px) and (min-width:768px){#hero .host-rail .host-option b{font-size:13px}.journey{font-size:14px;gap:18px}.card-actions .card-service,.card-actions .card-cta{font-size:13px}}
@media(max-width:767px){
 #hero .host-rail .host-option b{font-size:14px}#hero .host-rail .host-option small{font-size:12px}
 .journey>span{font-size:12px;line-height:1.6}.journey b{font-size:12px}.journey svg{width:44px;height:44px}
 .store-card .avatar-tag{font-size:11px}.store-card .card-speech{font-size:12px;max-height:96px}
 .store-card .card-meta{font-size:11px;flex-wrap:wrap;gap:4px}
 .store-card .card-body h3{font-size:16px;min-height:48px}
 .card-actions .card-service,.card-actions .card-cta{font-size:12px;min-height:44px}
 .card-actions .card-cta{flex-basis:112px}
}
@media(max-width:360px){.journey svg{width:34px;height:34px}.journey>span{font-size:11px}}
@media(max-width:767px){
 .journey{display:none}
 #hero{scroll-margin-top:12px}
 .mobile-invitation h2{font-size:clamp(12px,3.4vw,23px);white-space:nowrap;letter-spacing:-.3px;line-height:1.6}
 .experience-media-controls{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
 .experience-media-controls button{min-height:32px}
}
.experience-media-controls button[data-media="mute"]{display:grid;place-items:center;width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;flex-shrink:0}
.experience-media-controls button[data-media="mute"] svg{width:20px;height:20px;pointer-events:none}
.experience-media-controls button[data-media="mute"][hidden]{display:none}
.store-card .avatar-tag{max-width:72%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.store-card .avatar-tag:empty{display:none}

/* Compact phone Hero: merchant name, avatar and offer come first. */
@media (max-width: 767px) {
    #hero {
        padding-top: 12px;
        row-gap: 12px;
    }

    #hero > .mobile-store-intro {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    #hero > .mobile-store-intro .merchant-type {
        flex-shrink: 0;
        font-size: 11px;
        padding: 4px 8px;
    }

    #hero > .mobile-store-intro h2 {
        min-width: 0;
        margin: 0;
        font-size: 18px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Full location and description remain in the store details below the offer. */
    #hero > .mobile-store-intro p,
    #hero > .merchant-welcome {
        display: none;
    }

    #hero .experience-stage {
        height: clamp(250px, 82vw, 350px);
        aspect-ratio: auto;
    }

    #hero .experience-invite {
        width: auto;
        max-width: 76%;
        padding: 10px 12px;
    }

    #hero .experience-invite > span:first-child,
    #hero .experience-invite > span[data-bubble-name] {
        display: none;
    }

    #hero .experience-invite > span:last-child {
        margin-top: 0;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    #hero .experience-info {
        gap: 12px;
    }
}

/* Header coupon entry: hover, keyboard focus and touch feedback. */
header > .wallet-button {
 transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
@media (hover:hover) and (pointer:fine) {
 header > .wallet-button:hover {
  background:#693af0;color:#fff;border-color:#693af0;
  box-shadow:0 5px 16px rgba(105,58,240,.22);transform:translateY(-2px);
 }
}
header > .wallet-button:focus-visible {
 outline:3px solid #b7a1ff;outline-offset:3px;
 background:#693af0;color:#fff;border-color:#693af0;
}
header > .wallet-button:active {
 background:#5630cc;color:#fff;border-color:#5630cc;transform:translateY(0);
 box-shadow:0 2px 6px rgba(105,58,240,.18);
}
@media (prefers-reduced-motion:reduce) {
 header > .wallet-button {transition:none;}
 header > .wallet-button:hover {transform:none;}
}