/* ==========================================================================
   Phone / portrait layout. The kiosk is designed for a 16:9 booth screen with
   absolutely placed panels; on a phone (or any portrait screen) every screen
   becomes one scrollable column. Loaded with a media query in index.html, so
   the booth laptops never see these rules.
   ========================================================================== */
html { font-size: 14px; }
html, body { overflow: hidden; }

/* ---------- top bar: brand + back/home + languages, always on screen ---------- */
#topbar { height: 3.6rem; padding: 0 .9rem; grid-template-columns: 1fr auto; gap: .5rem; }
#stepper { display: none; }
.topnav { gap: .4rem; min-width: 0; }
.topnav .brand { margin-right: .3rem; }
.brand-name { font-size: .78rem; letter-spacing: .22em; }
.nav-btn { height: 2.2rem; padding: 0 .65rem; font-size: .8rem; }
.nav-btn span[data-i18n] { display: none; }            /* icons only */
.lang { gap: .15rem; padding: .15rem; }
.lang button { padding: .4rem .6rem; font-size: .78rem; }
#frame { inset: .5rem; }
#frame .c { width: .9rem; height: .9rem; }
/* bottom bar: only the "Visit Braindeck" link, centred */
#hud { left: 0; right: 0; bottom: .55rem; justify-content: center; font-size: .66rem; }
#hud .hud-left { display: none; }
#orb { opacity: .45; }

/* ---------- stage: screens and their views scroll ---------- */
#stage { top: 3.6rem; bottom: 1.8rem; }
.screen { padding: 0; }
.view { inset: 0; padding: 1rem 1.1rem 2rem; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ---------- type ---------- */
.hero { font-size: 2.5rem; }
.title { font-size: 1.9rem; }
.title-s { font-size: 1.7rem; }
.lead { font-size: 1rem; }
.kicker { font-size: .7rem; letter-spacing: .22em; }
.btn { height: 3.2rem; padding: 0 1.4rem; font-size: 1rem; }
.btn-lg { height: 3.6rem; padding: 0 1.8rem; font-size: 1.05rem; }
.row { flex-wrap: wrap; }

/* ---------- ATTRACT ---------- */
.screen[data-screen="attract"] { overflow-y: auto; }
.screen[data-screen="attract"] .attract-copy { position: static; padding: 1.4rem 1.2rem 0; }
.screen[data-screen="attract"] .hero { font-size: 2.6rem; }
.screen[data-screen="attract"] .attract-copy .lead { font-size: .98rem; }
.screen[data-screen="attract"] .start { position: relative; left: auto; top: auto; transform: none; margin: 2.2rem auto 1.6rem; width: 11rem; height: 11rem; }
.screen[data-screen="attract"] .attract-steps { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; padding: 0 1.4rem 2rem; }
.screen[data-screen="attract"] .attract-steps span { white-space: normal; font-size: .85rem; }

/* ---------- CREATE ---------- */
.create-choose { gap: .9rem; }
.mode-tabs { grid-template-columns: 1fr 1fr; gap: .55rem; }
.mode-tab { padding: .75rem .8rem; }
.mode-tab .mt-name { font-size: .98rem; }
.mode-tab small { font-size: .72rem; }
.create-body { flex: none; display: flex; flex-direction: column; gap: 1.2rem; }
.create-body .col, .field, .pill-groups { min-height: auto; flex: none; }
.create-body .col > .btn-primary { align-self: stretch; margin-top: .4rem; }
.pill { height: 2.5rem; padding: 0 .95rem; font-size: .9rem; }
.field textarea { min-height: 8rem; }
.gen-view { justify-content: center; padding-bottom: 2rem; }
.gen-view .title { font-size: 1.7rem; }
.gen-stages { gap: 1.1rem; flex-wrap: wrap; justify-content: center; }
.gen-bar { width: 80%; }
.song-card { position: relative; right: auto; top: auto; transform: none; width: 100%; margin-top: 22vh; padding: 1.4rem 1.3rem; gap: 1rem; }
.song-title { font-size: 2.1rem; }
.song-card .row { flex-direction: column; align-items: stretch; }
.song-card .row .btn, .duet-card .row .btn { width: 100%; flex: none; }   /* desktop flex:1 squashes them in a column */

/* ---------- DUET ---------- */
.duet-choose { display: flex; flex-direction: column; align-items: stretch; gap: 1.4rem; }
.choice { padding: 1.2rem 1.2rem; gap: 1rem; }
.choice .ic { width: 3.2rem; height: 3.2rem; }
.choice .ic svg { width: 1.5rem; height: 1.5rem; }
.choice .nm { font-size: 1.25rem; }
.choice .badge { top: .6rem; right: .7rem; }
.choice.sample .top { gap: 1rem; }
.voices, .voices:has(.mine:not([hidden])) { grid-template-columns: 1fr 1fr; }
.capture { display: flex; flex-direction: column; align-items: stretch; gap: 1.2rem; padding: 1rem 1.1rem 2rem; }
.capture .cap-head .title { font-size: 1.8rem; }
.cap-script { font-size: 1.15rem; padding: 1.2rem 1.3rem; }
.cap-rec { gap: 1.2rem; }
.cap-btn { width: 8.5rem; height: 8.5rem; }
.cap-wave { width: 100%; height: 3.5rem; }
.cap-back { align-self: flex-start; }
.cloning { justify-content: center; }
.cloning .title { font-size: 1.7rem; }
.vp { flex-wrap: wrap; justify-content: center; gap: .6rem; }
.vp span { min-width: 6.5rem; padding: .6rem .8rem; }
.perform { justify-content: center; gap: 1.1rem; }
.turn { height: 2.8rem; font-size: 1.05rem; padding: 0 1.2rem; }
.lane-wrap { height: 30vh; }
.lyric { font-size: 1.55rem; min-height: 2.4rem; padding: 0 .4rem; }
.lyric-next { font-size: 1rem; }
.perf-foot { width: 100%; }
.mixing { justify-content: center; }
.duet-card { position: relative; right: auto; top: auto; transform: none; width: 100%; margin-top: 24vh; padding: 1.4rem 1.3rem; }
.duet-card .row { flex-direction: column; align-items: stretch; }
.duet-card .row .btn { width: 100%; }

/* ---------- PROTECT ---------- */
.protect { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 6rem; }
.protect-head { gap: .6rem; }
.protect-head .title { font-size: 1.8rem; }
.protect-head .sub { display: none; }
.psteps { flex-direction: row; gap: .3rem; margin-top: .2rem; }
.psteps li { flex: 1; flex-direction: column; align-items: center; text-align: center; padding: .5rem .3rem; gap: .35rem; }
.psteps li b { font-size: .78rem; }
.psteps li small { display: none; }
/* the visible stage takes its real height; the hidden ones stay stacked behind it */
.pstage-wrap { height: auto; min-height: 24rem; }
.pstage { padding: 1.1rem 1rem; gap: .9rem; }
.pstage.on { position: relative; }
.cert { overflow: visible; }
.cert::before { display: none; }
.pstage .phead h3 { font-size: 1.05rem; }
.pcanvas { min-height: 9rem; }
.stats { gap: .5rem; }
.stat { padding: .6rem .6rem; }
.stat b { font-size: 1rem; word-break: break-all; }
.bitgrid.compact { grid-template-columns: repeat(8, 1fr); gap: 5px; }
.attack { grid-template-columns: 1fr 1fr; gap: .5rem .8rem; padding: .8rem .9rem; }
.attack .nm { grid-column: 1; }
.attack .bar { grid-column: 2; }
.res { min-width: 0; font-size: .74rem; }
.cert { padding: 1.2rem 1.1rem; }
.cert h4 { font-size: 1.5rem; }
.seal { width: 3.6rem; height: 3.6rem; }
.seal svg { width: 1.6rem; height: 1.6rem; }
.cert dl { gap: .5rem 1rem; margin-top: 1rem; }
.cert dd { font-size: .78rem; }
.cert-tests { grid-template-columns: 1fr; gap: .5rem; margin-top: 1rem; }
.protect-actions { position: fixed; left: 1rem; right: 1rem; bottom: 2.2rem; z-index: 8; }
.protect-actions .btn { width: 100%; }

/* ---------- DELIVER ---------- */
.deliver { display: flex; flex-direction: column; align-items: stretch; gap: 1.4rem; }
.deliver-copy .title { font-size: 1.9rem; }
.code i { width: 2.6rem; height: 3.4rem; font-size: 1.7rem; }
.code-sw { height: 3.4rem; }
.deliver-actions { flex-wrap: wrap; }
.deliver-side { gap: 1rem; }
.illu { width: 14rem; height: 11.5rem; }
.reader-arrow { display: none; }

/* ---------- THANKS ---------- */
.thanks { padding: 2rem 1.2rem; justify-content: center; }
.thanks .hero { font-size: 2.8rem; }

/* ---------- overlays ---------- */
.modal { width: 92vw; padding: 1.5rem 1.4rem; }
.modal h3 { font-size: 1.4rem; }
.modal .row { justify-content: stretch; }
.modal .row .btn { flex: 1; }
.keypad button { height: 3.2rem; }
.kp-num i { width: 3.2rem; height: 4rem; font-size: 2.1rem; }
.phone { height: min(72vh, 640px); }
#toast { bottom: 1.5rem; max-width: 90vw; text-align: center; }