/* The supplied artwork is unchanged; this window excludes its transparent margins. */
.samsung-mark {
  display: block;
  position: relative;
  width: 128px;
  aspect-ratio: 1996 / 294;
  overflow: hidden;
  flex: 0 0 auto;
}
.samsung-mark img {
  position: absolute;
  width: 120.2405%;
  max-width: none;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.header-branding { display: flex; align-items: center; gap: 24px; min-width: 0; }
.event-partner { display: flex; flex-direction: column; gap: 7px; border-left: 1px solid var(--line); padding-left: 24px; }
.event-label { color: #6a7b72; font-size: 8px; letter-spacing: 1.8px; }
.site-header { gap: 20px; }
.brand { white-space: nowrap; }
.stage-identity { display: flex; align-items: center; gap: 22px; }
.stage-identity .samsung-mark { width: 116px; }
.stage-identity .stage-brand { border-left: 1px solid var(--line); padding-left: 22px; }
.stage-visual { position: absolute; inset: 0; pointer-events: none; }
.hero { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.hero > * { min-width: 0; }
.ticket-main, .ticket-stub { min-width: 0; }
.ticket-fan { container-type: inline-size; }
.ticket-fan .ticket-number { font-size: 20.4cqw; }
.ticket-fan .ticket-number.medium { font-size: 13.5cqw; letter-spacing: -.6cqw; }
.ticket-fan .ticket-number.long { font-size: 9cqw; letter-spacing: -.4cqw; }
.ticket-fan .ticket-label { font-size: clamp(7px, 2.2cqw, 11px); letter-spacing: .8cqw; }
.ticket-bottom { white-space: nowrap; }
.small-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }

.duration-control { margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: #fcfbf6; }
.duration-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; }
.duration-heading label { font-weight: 600; }
.duration-heading output { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.duration-control input { display: block; width: 100%; min-width: 0; height: 36px; margin: 2px 0; accent-color: var(--accent); cursor: pointer; }
.duration-control input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.duration-scale { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10px; }
.duration-control p { font-size: 10px; color: var(--muted); margin: 7px 0 0; }

@media (max-width: 760px) {
  .site-header {
    height: auto;
    min-height: 118px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 8px;
    padding: max(12px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 16px max(20px, env(safe-area-inset-left));
  }
  .header-branding { display: contents; }
  .brand { grid-column: 1; grid-row: 1; font-size: 20px; gap: 6px; }
  .brand-icon { width: 29px; height: 29px; }
  .brand-icon svg { width: 23px; height: 23px; }
  .brand-dot { display: none; }
  .site-header nav { grid-column: 2; grid-row: 1; gap: 0; }
  .site-header nav button { min-width: 44px; min-height: 44px; justify-content: center; }
  .site-header .help-button { border: 0; font-size: 17px; }
  .event-partner { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: center; gap: 15px; border-left: 0; padding: 3px 0 0; }
  .event-partner .samsung-mark { width: 110px; }
  main { padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right)); }
  h1 { font-size: clamp(43px, 14vw, 58px); }
  .range-fields { gap: 10px; }
  .range-fields label { padding-inline: 12px; }
  .range-fields input { font-size: clamp(17px, 5.8vw, 25px); }
  .range-heading { flex-wrap: wrap; }
  .pool-line { flex-wrap: wrap; }
  .pool-line > span:first-child { flex-wrap: wrap; }
  .reset-range-button, .sound-check button { min-height: 44px; }
  .sound-check { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; gap: 8px 10px; }
  .sound-check button { grid-column: 1 / -1; }
  .sound-check label { margin: 0; }
  .sound-check input { width: 100%; min-height: 32px; margin: 0; }
  .duration-control input { min-height: 44px; }
  .ticket-scene { height: clamp(310px, 88vw, 355px); }
  .ticket-fan { width: 88%; height: auto; aspect-ratio: 2.05; }
  .ticket-fan .ticket-main { margin: 8px 5px 8px 8px; padding: 6px; }
  .ticket-fan .ticket-bottom { font-size: clamp(4px, 1.6cqw, 6px); gap: 4px; letter-spacing: .6px; }
  .ticket-fan .ticket-stub { gap: 7px; }
  .ticket-fan .stub-title { font-size: clamp(10px, 4cqw, 16px); }
  .ticket-fan .stub-number { font-size: clamp(9px, 3.3cqw, 13px); }
  .ticket-fan .stub-number.long { font-size: 2.7cqw; }
  .ticket-fan .barcode { height: 12px; }
  .orbit { max-width: 100%; aspect-ratio: 1; height: auto; }
  .ticket-scene:before { max-width: 100%; }
  .text-button { min-height: 44px; }
  footer { flex-wrap: wrap; justify-content: center; text-align: center; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .dialog-actions button, .close-dialog { min-height: 44px; }
  .close-dialog { min-width: 44px; }
}

/* On a phone or short display, the reveal has its own flexible row.
   Text, tickets, and buttons cannot overlap when the viewport changes height. */
@media (max-width: 760px), (max-height: 650px) {
  .draw-stage[open] {
    display: grid;
    grid-template-areas: 'top' 'feedback' 'heading' 'visual' 'actions';
    grid-template-rows: auto auto auto minmax(150px, 1fr) auto;
    align-items: stretch;
    height: 100dvh;
    padding: max(12px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    overflow-x: clip;
    overflow-y: auto;
  }
  .stage-top { grid-area: top; padding: 0; gap: 10px; min-height: 40px; }
  .stage-identity { gap: 12px; }
  .stage-identity .samsung-mark { width: 92px; }
  .stage-identity .stage-brand { font-size: 14px; padding-left: 12px; white-space: nowrap; }
  #stage-range { font-size: 11px; white-space: nowrap; }
  #stage-sound { min-height: 44px; padding-inline: 6px; justify-content: center; white-space: nowrap; }
  .stage-heading { grid-area: heading; margin: 10px 0; padding: 0 6px; }
  .stage-heading h2 { font-size: clamp(25px, 5.5vw, 35px); line-height: 1.15; letter-spacing: -1px; margin: 8px 0; max-width: none; overflow-wrap: anywhere; }
  .stage-heading p { display: block; font-size: 12px; }
  .stage-visual { grid-area: visual; position: relative; inset: auto; width: 100%; min-width: 0; min-height: 0; container-type: size; }
  .shuffle-field { inset: 0; }
  .winner-ticket {
    container-type: inline-size;
    width: min(95cqw, 170cqh, 650px);
    height: auto;
    aspect-ratio: 760 / 355;
    top: 50%;
  }
  .draw-stage.revealed .winner-ticket { animation-name: winner-arrive-phone; }
  .draw-stage.reduced.revealed .winner-ticket { transform: translate(-50%, -50%); }
  .winner-ticket .ticket-main { margin: 2.6cqw 1.8cqw 2.6cqw 2.6cqw; padding: 2.4cqw 3.1cqw; }
  .winner-ticket .ticket-number { font-size: 25cqw; letter-spacing: -1.2cqw; }
  .winner-ticket .ticket-number.medium { font-size: 17.5cqw; letter-spacing: -.65cqw; }
  .winner-ticket .ticket-number.long { font-size: 11.6cqw; letter-spacing: -.5cqw; }
  .winner-ticket .ticket-label { font-size: 2.1cqw; letter-spacing: .7cqw; white-space: nowrap; }
  .winner-ticket .ticket-bottom { font-size: 1.4cqw; letter-spacing: .25cqw; padding-top: 1.6cqw; gap: 1.5cqw; }
  .winner-ticket .ticket-bottom b { font-size: 1.8cqw; line-height: 1; }
  .winner-ticket .ticket-stub { gap: 1.5cqw; }
  .winner-ticket .stub-number { font-size: 3.3cqw; }
  .winner-ticket .stub-number.long { font-size: 2.2cqw; }
  .winner-ticket .barcode { height: 3.7cqw; }
  .flying-ticket { width: min(82cqw, 180cqh, 430px); height: auto; aspect-ratio: 2.05; container-type: inline-size; }
  .flying-ticket .ticket-number { font-size: 20cqw; letter-spacing: -1cqw; }
  .flying-ticket .ticket-number.medium { font-size: 13.5cqw; }
  .flying-ticket .ticket-number.long { font-size: 9cqw; }
  .flying-ticket .ticket-label { font-size: 2cqw; letter-spacing: .5cqw; }
  .flying-ticket .ticket-bottom { font-size: 1.5cqw; gap: 1cqw; letter-spacing: .15cqw; }
  .flying-ticket .ticket-bottom b { font-size: 2cqw; }
  .flying-ticket .stub-title { font-size: 4cqw; }
  .flying-ticket .stub-number { font-size: 3.3cqw; }
  .flying-ticket .stub-number.long { font-size: 2.5cqw; }
  .flying-ticket .barcode { height: 3cqw; }
  .stage-bottom { grid-area: actions; position: static; bottom: auto; width: min(360px, 100%); margin: 0 auto; padding-top: 10px; }
  .stage-bottom > p { margin: 8px 0; }
  .draw-stage.revealed #shuffle-status { display: none; }
  .stage-bottom .back-button { min-height: 44px; margin: 2px 0 0; }
  .stage-audio-feedback { grid-area: feedback; position: static; transform: none; width: auto; max-width: none; margin: 6px 0; font-size: 11px; }
}

@keyframes winner-arrive-phone {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-12deg); }
  65% { opacity: 1; }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .draw-stage.revealed .winner-ticket { opacity: 1; }
}

@media (max-width: 520px) {
  .stage-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; }
  #stage-range { grid-row: 2; grid-column: 1 / -1; text-align: center; padding-top: 4px; }
  #stage-sound { grid-column: 2; grid-row: 1; }
}

@media (max-height: 450px) {
  .draw-stage[open] { grid-template-rows: auto auto auto minmax(100px, 1fr) auto; padding-block: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-bottom)); }
  .stage-heading { margin: 0 0 4px; }
  .stage-heading h2 { font-size: 24px; margin: 4px 0; }
  .stage-heading .eyebrow, .stage-heading p { display: none; }
  .stage-bottom { padding-top: 4px; }
  .stage-bottom .draw-button { min-height: 42px; padding-block: 10px; }
}