/* OVATION H03.2G.4-UA3 — Device Continuity
 * One participant interface across desktop, tablet, and mobile.
 * Breakpoints may change arrangement, density, and scale; they may not create a separate product state.
 */

:root{
  --ov-content:min(1220px,calc(100vw - 30px));
  --ov-touch:44px;
}

html,body,.experience{max-width:100%;overflow-x:clip}
img,video,svg,canvas{max-width:100%}
button,a.btn,input,select,textarea{min-height:var(--ov-touch)}

/* Core public sections remain the same DOM/content on every viewport. */
#tickets,#visuals,#partner,#night,.details,.applause,.artist-world{visibility:visible}

/* Shared media behavior: same source, same crop intent, responsive box. */
.hero-art,.family-img,.world-item,.commerce-visual{min-width:0}
.hero-art img,.family-img img,.world-item img,.commerce-visual img{display:block;width:100%;height:100%;object-fit:cover}
.family-img.ua3-empty,.commerce-visual.ua3-empty{display:none!important}

/* Shared component system. Desktop is layout mode, not a separate interface. */
.hero-grid,.section-head,.commerce-split,.world-grid,.detail-grid,.sponsor-grid,.vendor-meta,.countdown-inner{min-width:0}
.family-card,.vendor-card,.sponsor-card,.detail,.world-item,.addon-card{min-width:0}

/* Tablet adaptation. */
@media (max-width:980px){
  .container{width:min(100% - 28px,var(--max,1220px))}
  .hero{min-height:auto;padding:58px 0 52px}
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .hero-art{min-height:clamp(360px,65vw,560px)}
  .section{padding:64px 0}
  .section-head{grid-template-columns:1fr;gap:10px;align-items:start}
  .commerce-split{grid-template-columns:1fr;gap:18px}
  .sponsor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .world-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto;}
  .world-item.large{grid-row:auto;grid-column:1/-1;min-height:420px}
  .world-item:not(.large){min-height:260px}
  .countdown-inner{grid-template-columns:repeat(4,1fr);gap:10px}
  .countdown-label{grid-column:1/-1}
  .time-cell{min-width:0;padding-left:0;border-left:0;border-top:1px solid var(--line2);padding-top:10px}
}

/* Mobile adaptation of the SAME components/content. */
@media (max-width:700px){
  .container{width:min(100% - 24px,var(--max,1220px))}
  .topbar .nav{min-height:60px;gap:8px}
  .brandmark{min-width:0}.brandmark strong{font-size:.86rem}.brandmark small{font-size:.56rem}
  .nav-actions{min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .nav-actions::-webkit-scrollbar{display:none}
  .nav-actions>*{flex:0 0 auto}

  .hero{padding:42px 0 38px}
  .hero-grid{display:grid;grid-template-columns:1fr;gap:22px}
  .hero h1{font-size:clamp(4rem,20vw,6.2rem)}
  .hero .tagline{font-size:clamp(1.15rem,5.5vw,1.55rem)}
  .hero-art{min-height:clamp(300px,105vw,470px);border-radius:22px}
  .hero-lockup{left:14px;right:14px;bottom:14px}
  .hero-lockup strong{font-size:1.35rem}

  .section{padding:52px 0}
  .section-head{display:block;margin-bottom:20px}
  .section-head p{margin-top:10px}
  .section-head h2{font-size:clamp(2.35rem,12vw,3.5rem)}

  .ticket-rail{gap:12px;padding:10px 12px 24px;scroll-padding-inline:12px}
  .family-card{flex:0 0 min(88vw,430px);min-height:0;border-radius:150px 150px 24px 24px;padding:13px;opacity:1;transform:none}
  .family-card.active{transform:none}
  .family-img{height:clamp(220px,70vw,310px);border-radius:140px 140px 18px 18px}
  .family-body{padding:16px 5px 2px}
  .family-name{font-size:clamp(1.8rem,9vw,2.4rem)}
  .family-price{font-size:clamp(3.5rem,17vw,4.8rem)}
  .family-card .btn{min-height:50px}
  .rail-head{align-items:flex-start}.rail-controls{flex:0 0 auto}

  .addon-card{grid-template-columns:1fr;gap:12px;padding:18px}
  .addon-card .btn{width:100%}

  .world-grid{display:grid;grid-template-columns:1fr;grid-template-rows:auto;gap:10px}
  .world-item,.world-item.large{grid-row:auto;grid-column:auto;min-height:260px;border-radius:20px}
  .world-item.large{min-height:360px}

  .commerce-split{display:grid;grid-template-columns:1fr;gap:14px}
  .sponsor-grid{display:grid;grid-template-columns:1fr;gap:12px}
  .vendor-card,.sponsor-card{width:100%;min-height:0;padding:18px;border-radius:20px}
  .vendor-card .btn,.sponsor-card .btn{width:100%;min-height:50px}
  .commerce-visual{aspect-ratio:16/10;border-radius:16px}

  .detail-grid{display:grid;grid-template-columns:1fr;gap:10px}
  .vendor-meta{grid-template-columns:1fr}

  .countdown-inner{grid-template-columns:repeat(2,1fr);gap:8px;padding:14px 0}
  .countdown-label{grid-column:1/-1}
  .time-cell strong{font-size:1.7rem}

  form,.ua2-grid{min-width:0}
  input,select,textarea{width:100%;max-width:100%}
}

/* Small phones retain the same hierarchy; only density changes. */
@media (max-width:420px){
  .container{width:min(100% - 20px,var(--max,1220px))}
  .hero h1{font-size:clamp(3.55rem,20vw,5.1rem)}
  .family-card{flex-basis:92vw}
  .family-img{height:68vw}
  .section{padding:46px 0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}