/* Airport split-flap board for a wall TV. Everything is sized in vh/vw so it scales from 720p to 4K. */
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden}
body{background:#0c0d0f;color:#f3efe4;font-family:'Barlow Condensed','Arial Narrow',sans-serif;cursor:default}
body.idle{cursor:none}
.tv{height:100vh;padding:4.4vh 4.2vw;display:flex;flex-direction:column;gap:2vh}
header{display:flex;justify-content:space-between;align-items:center;height:5.6vh}
.where{font-size:3.7vh;font-weight:600;color:#8d9096;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.right{display:flex;align-items:center;gap:3vh}
.live{font-size:2.8vh;font-weight:700;color:#8d9096;border:.2vh solid #3a3d43;border-radius:99px;padding:.2vh 2vh}
.live.on{color:#3fd1a0;border-color:#3fd1a0}
.clock{font-size:5.2vh;font-weight:700;font-variant-numeric:tabular-nums}
main{display:grid;grid-template-columns:minmax(0,1fr) 22vw;gap:3vw;flex:1;min-height:0}
.col{display:flex;flex-direction:column;gap:1.6vh;min-width:0;min-height:0}
.label{font-size:5.6vh;font-weight:700;line-height:1}
.label.amber{color:#f2a531}.label.dim{color:#8d9096}

/* Now serving: big split-flap number with the first name to its right */
.nowrow{display:flex;align-items:center;gap:3.4vh;flex:1;min-height:0}
.flaps{--s:1;--fh:69vh;display:flex;gap:2vh;height:calc(var(--fh) * var(--s));flex:none}
body.home .flaps{--fh:57vh}
.flaps[data-len="2"]{--s:.95}.flaps[data-len="3"]{--s:.62}.flaps[data-len="4"]{--s:.46}
.fc{position:relative;width:calc(var(--fh) * .609 * var(--s));height:100%;background:#1a1c20;border-radius:2.4vh;display:flex;align-items:center;justify-content:center;font-size:calc(var(--fh) * 1.029 * var(--s));font-weight:800;line-height:1;font-variant-numeric:tabular-nums;overflow:hidden;perspective:80vh}
.fc::after{content:'';position:absolute;left:0;right:0;top:calc(50% - .35vh);height:.7vh;background:#0c0d0f}
.fc span{display:block;transform-origin:50% 50%}
.fc.flip span{animation:flip .6s cubic-bezier(.3,.7,.2,1)}
@keyframes flip{0%{transform:rotateX(90deg);opacity:0}60%{transform:rotateX(-10deg);opacity:1}100%{transform:none}}
.fc.empty{color:#3a3d43}
.flaps[data-len="0"]{height:auto;--s:1;flex:1;min-width:0}.waitmsg{font-size:8vh;font-weight:700;color:#5a5e66;line-height:1.05;white-space:normal;max-width:100%}
.namebox{flex:1;min-width:0;container-type:inline-size}
.name{--nl:5;font-size:clamp(6vh, calc(100cqw / (var(--nl) * .5)), 24vh);font-weight:700;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col.now.flash .flaps{animation:glow 2.2s ease-out}
@keyframes glow{0%{filter:drop-shadow(0 0 0 rgba(242,165,49,0))}20%{filter:drop-shadow(0 0 5vh rgba(242,165,49,.85))}100%{filter:none}}

/* Next */
.chip{display:flex;align-items:center;justify-content:center;background:#1a1c20;border-radius:2vh;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;min-width:0;overflow:hidden}
.chip.n1{flex:1.45;border:.6vh solid #f2a531;color:#f2a531;font-size:21.5vh}
.chip.n2{flex:1;font-size:14vh}
.chip.n3{flex:1;font-size:14vh;color:#8d9096}
.chip.empty{color:transparent}
.chip.pop{animation:pop .5s cubic-bezier(.3,1.4,.4,1)}
@keyframes pop{from{transform:scale(.85);opacity:0}}
.banner{position:fixed;left:0;right:0;top:0;background:#b4432f;color:#fff;text-align:center;font-size:3.4vh;font-weight:700;padding:1vh;transform:translateY(-110%);transition:transform .3s;z-index:9}.banner.on{transform:none}
.hint{position:fixed;right:1.2vw;bottom:.8vh;font-size:1.9vh;color:#3a3d43;font-weight:600}

/* Portrait screens (phones, rotated TVs): sized from the screen WIDTH so 1 to 4 digits always fit; the page scrolls if it must. */
@media (max-aspect-ratio:1/1){
  html,body{overflow:auto}
  .tv{height:auto;min-height:100vh;padding:4vw 5vw 6vw;gap:4vw}
  header{height:auto;gap:3vw}
  .where{font-size:max(3.6vw,13px);white-space:normal;line-height:1.2}
  .live{font-size:max(2.9vw,11px);padding:.3vw 2.4vw}.clock{font-size:max(5vw,17px)}.right{gap:2.5vw}
  main{grid-template-columns:minmax(0,1fr);gap:5vw;flex:none}
  .col{gap:2.5vw}
  .col.now{align-items:center}
  .label{font-size:max(6.6vw,22px)}
  .nowrow{flex-direction:column;flex:none;gap:2.5vw;width:100%}
  .flaps{--s:1;height:calc(62vw * var(--s));gap:2vw}
  .flaps[data-len="2"]{--s:1}.flaps[data-len="3"]{--s:.64}.flaps[data-len="4"]{--s:.48}
  .fc{width:calc(44vw * var(--s));font-size:calc(72vw * var(--s));border-radius:2.4vw}
  .fc::after{height:.8vw;top:calc(50% - .4vw)}
  .flaps[data-len="0"]{height:auto}.waitmsg{font-size:9vw;text-align:center}
  .namebox{width:100%;flex:none}
  .name{font-size:14vw;min-height:15vw;text-align:center}
  .col:not(.now){display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:3vw;align-items:stretch}
  .col:not(.now) .label{grid-column:1 / -1}
  .chip{border-radius:3vw}
  .chip.n1{flex:none;font-size:22vw;height:34vw;border-width:.9vw}
  .chip.n2,.chip.n3{flex:none;font-size:15vw;height:34vw}
  .hint{display:none}
}
@media (hover:none){.hint{display:none}}
@media (prefers-reduced-motion:reduce){.fc.flip span,.col.now.flash .flaps,.chip.pop{animation:none}}

/* Home page only: the big call-to-action bar under the board */
.cta{display:flex;align-items:center;justify-content:center;flex:none;height:13vh;background:#f2a531;color:#0c0d0f;border-radius:2.4vh;font-size:7.4vh;font-weight:800;line-height:1;text-decoration:none;transition:transform .12s ease,filter .12s}
.cta:hover{filter:brightness(1.06)}.cta:active{transform:scale(.99)}.cta:focus-visible{outline:.6vh solid #f3efe4;outline-offset:.5vh}
@media (max-aspect-ratio:1/1){
  .cta{height:22vw;font-size:9.5vw;border-radius:4vw;position:sticky;bottom:3vw;box-shadow:0 2vw 6vw rgba(0,0,0,.65)}
}

/* Wall-TV: scan-to-register strip */
.scan{display:flex;align-items:center;gap:2.4vh;flex:none;padding:1.6vh 2.4vh;border:.4vh solid #2a2d33;border-radius:2.4vh;background:#15171a}
.qr{width:19vh;height:19vh;flex:none;border-radius:1.2vh;overflow:hidden;background:#fff}.qr svg{display:block;width:100%;height:100%}
.scanbig{font-size:7vh;font-weight:800;line-height:1;color:#f2a531}
.scansmall{margin-top:1vh;font-size:3.4vh;font-weight:600;color:#f3efe4;letter-spacing:.02em}
@media (max-aspect-ratio:1/1){.scan{gap:3vw;padding:2.4vw 3vw}.qr{width:30vw;height:30vw}.scanbig{font-size:7vw}.scansmall{font-size:3.6vw}}