/* Mobile action bar: safe-area aware, with room for existing floating controls. */
.mobile-actions{display:none}
@media(max-width:600px){
 /* The fixed bottom bar provides the mobile ticket action. */
 .nav .btn-main{display:none}
 body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
 html{scroll-padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
 .mobile-actions{position:fixed;inset:auto 0 0;z-index:49;display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:var(--bg);font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif}
 .mobile-actions a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:12px;font-size:16px;font-weight:700;line-height:1.5;letter-spacing:0;background:var(--panel2);color:var(--ink)}
 .mobile-actions .mobile-buy{background:var(--pink);color:var(--bg)}
 .mobile-actions a:hover{filter:brightness(1.12)}
 .mobile-actions a:active{transform:translateY(1px)}
 .mobile-actions a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
 .music,.ticket-shortcut{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
 .float-cta{display:none}
}

/* Mobile music control lives in the footer; desktop keeps its fixed control. */
@media(max-width:600px){
 footer .music{position:static;display:flex;width:max-content;max-width:100%;margin:24px auto 0;translate:none;transform:none;box-shadow:none;min-height:44px}
 footer .music .mtxt{display:inline}
 .fact .event-date-short{font-size:clamp(13px,3.6vw,16px);white-space:nowrap;letter-spacing:0}
}

@media(max-width:600px){
 footer .ticket-shortcut{position:static;display:flex;width:max-content;height:auto;min-height:44px;margin:16px auto 0;padding:10px 20px;font-size:14px;border-radius:24px;opacity:1;pointer-events:auto;transform:none;box-shadow:none}
 footer .ticket-shortcut::after{content:none}
 #tickets .early-ticket{padding:20px 24px}
 #tickets .early-ticket .sub{margin:4px 0 8px}
 #tickets .early-ticket .ticket-highlight{margin-top:8px}
 #tickets .early-ticket .banquet-value{margin:12px 0 0;padding:8px}
 #tickets .early-ticket .ticket-benefits{margin-bottom:8px}
}