/* --------------------------------------------------------------------------
   Live Together (live_together.php) - the 2026-10 look

   The players' phones get the same glass, type and buttons as Bopster Live
   and the Studio (css/live-app.css, studio.php): Inter, the rim + specular
   glass, the pink "go" gradient, teal for Live Together, sentence case.
   Layered over css/livetogether.css, every rule starts at body.lt-app.
   Also styles the 2026-10 additions: rules sheet, reaction bar and floats,
   share button, round recap.
   -------------------------------------------------------------------------- */

body.lt-app {
    --lv-spring: cubic-bezier(.22, 1.35, .38, 1);
    --lv-bounce: cubic-bezier(.3, 1.65, .42, 1);
    --lv-rim: rgba(255,255,255,.18);
    --lv-spec: inset 0 1px 1px rgba(255,255,255,.3), inset 0 -1px 1px rgba(255,255,255,.08), inset 1px 0 1px -.5px rgba(255,255,255,.16), inset -1px 0 1px -.5px rgba(255,255,255,.12);
    --lv-glass: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.02) 35%, rgba(255,255,255,0) 55%, rgba(255,255,255,.05));
    --lv-pink: linear-gradient(180deg, #ffffff21, transparent 60%), linear-gradient(115deg, #ca438e, #8054d4);
    --lv-live: linear-gradient(180deg, #ffffff21, transparent 60%), linear-gradient(115deg, #087e98, #346ecc);
    --lv-muted: #aab3c8;
    --lt-react-h: 4.2rem;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    background:
        radial-gradient(ellipse at 10% 0%, rgba(8,126,152,.28), transparent 48%),
        radial-gradient(ellipse at 95% 75%, rgba(202,67,142,.16), transparent 52%),
        radial-gradient(ellipse at 60% 110%, rgba(128,84,212,.18), transparent 55%),
        #0c1020;
    background-attachment: fixed;
    overflow-x: clip;
}
@supports (transition-timing-function: linear(0, 1)) {
    body.lt-app { --lv-spring: linear(0, .006, .025 2.4%, .101 5.1%, .287 9%, .539 13.7%, .721 17.6%, .865 21.9%, .974 26.7%, 1.048 31.9%, 1.089 37.6%, 1.105 44%, 1.102 51.2%, 1.087 59.3%, 1.067 68.4%, 1.045 78.8%, 1.024 91.1%, 1.012, 1.005, 1.002); }
}
body.lt-app .lt-app-bg { display: none; }
body.lt-app button { font-family: inherit; }

/* Glass surfaces ------------------------------------------------------------ */
body.lt-app :is(.lt-card, .lt-player-card, .lt-app-bar) {
    background: var(--lv-glass), rgba(16,22,40,.58);
    border: 1px solid var(--lv-rim);
    border-top-color: rgba(255,255,255,.3);
    box-shadow: var(--lv-spec), 0 24px 56px -32px rgba(0,0,0,.85);
    backdrop-filter: blur(22px) saturate(170%) brightness(1.06);
    -webkit-backdrop-filter: blur(22px) saturate(170%) brightness(1.06);
}
body.lt-app .lt-card { border-radius: 1.75rem; }

/* App bar: a floating glass bar like the site header */
body.lt-app .lt-app-bar {
    position: sticky; top: max(.5rem, env(safe-area-inset-top)); z-index: 30;
    margin: .5rem .6rem 0; padding: .5rem .55rem .5rem .9rem; border-radius: 1.4rem; min-height: 3.6rem;
}
body.lt-app .lt-logo { height: 1.7rem; width: auto; }
body.lt-app .lt-language-menu summary { min-height: 2.6rem; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); }

/* One centred column: the frame is the column, so the app bar, the cards and
   the footer share one axis. The old 760px+ "phone in a box" frame is dropped:
   the floating bar and glass cards already read as an app. */
body.lt-app { padding: 0; }
body.lt-app .lt-app-frame {
    width: min(100%, 36rem); margin: 0 auto; min-height: 100dvh;
    border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible;
}
body.lt-app .lt-app-bar { margin-left: max(1rem, env(safe-area-inset-left)); margin-right: max(1rem, env(safe-area-inset-right)); }
body.lt-app .lt-shell { width: auto; max-width: none; margin: 0; padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
@media (min-width: 760px) {
    body.lt-app .lt-app-bar { top: 1rem; margin-top: 1rem; }
    body.lt-app .lt-join-view { padding-top: clamp(1.5rem, 8vh, 5rem); }
}

/* Join ---------------------------------------------------------------------- */
body.lt-app .lt-kicker {
    padding: .32rem .8rem; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: #a5f3fc; background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.25);
}
body.lt-app .lt-hero-copy h1 { font-weight: 900; letter-spacing: -.035em; line-height: 1.02; font-size: clamp(2.2rem, 10vw, 3.2rem); color: #fff; text-wrap: balance; }
body.lt-app .lt-hero-copy p { color: var(--lv-muted); line-height: 1.5; }
body.lt-app .lt-join-card { padding: 1.25rem; }
/* "No code yet? Be the host." - under the join form, quieter than it */
body.lt-app .lt-host-card { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; padding: 1rem 1.1rem; }
body.lt-app .lt-host-img { width: 3.25rem; height: 3.25rem; }
body.lt-app .lt-host-card h2 { margin: 0; font-size: 1rem; font-weight: 900; letter-spacing: -.01em; color: #fff; }
body.lt-app .lt-host-card p { margin: .3rem 0 .75rem; color: var(--lv-muted); font-size: .86rem; line-height: 1.5; }
body.lt-app .lt-host-link {
    display: inline-flex; align-items: center; gap: .45rem; min-height: 2.6rem; padding: 0 1rem; border-radius: 999px;
    font-size: .88rem; font-weight: 800; color: #fff; text-decoration: none;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
}
body.lt-app .lt-host-link:hover { background: rgba(255,255,255,.14); }
body.lt-app .lt-host-link:focus-visible { outline: 2px solid #67e8f9; outline-offset: 3px; }
body.lt-app :is(.lt-code-input, #playerNameInput) {
    background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.14); color: #fff;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.35);
}
body.lt-app :is(.lt-code-input, #playerNameInput):focus { border-color: rgba(103,232,249,.6); box-shadow: inset 0 2px 6px rgba(0,0,0,.35), 0 0 0 3px rgba(103,232,249,.18); outline: none; }
body.lt-app .lt-inline-action { color: #67e8f9; font-weight: 800; }
body.lt-app label, body.lt-app .lt-label-row label { font-weight: 800; color: #e2e8f0; }

/* Buttons: the Studio's pink "go" and quiet glass pills */
body.lt-app .lt-primary-button {
    border: 0; border-radius: 999px; min-height: 3.3rem; font-weight: 900; letter-spacing: 0; text-transform: none;
    color: #fff; background: var(--lv-pink);
    box-shadow: inset 0 1px 0 #ffffff40, 0 14px 30px -14px rgba(202,67,142,.95);
    transition: transform .4s var(--lv-spring), filter .2s;
}
body.lt-app .lt-primary-button:active { transform: scale(.97); }
body.lt-app .lt-primary-button:hover { filter: brightness(1.08); }
body.lt-app :is(.lt-leave-button, .lt-rules-button) { border-radius: 999px; min-height: 2.6rem; font-weight: 800; }

/* Game ---------------------------------------------------------------------- */
body.lt-app.lt-in-game { padding-bottom: calc(var(--lt-react-h) + 1.5rem + env(safe-area-inset-bottom)); }
body.lt-app .lt-session-strip { gap: .5rem; }
body.lt-app .lt-session-meta small { font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #8d97ad; }
body.lt-app .lt-active-code { font-weight: 900; letter-spacing: .12em; }
body.lt-app .lt-rules-button {
    position: relative; display: inline-flex; align-items: center; gap: .35rem; margin-left: auto; padding: 0 .9rem; cursor: pointer;
    font-size: .8rem; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
}
body.lt-app .lt-rules-dot { position: absolute; top: -.1rem; right: -.1rem; width: .65rem; height: .65rem; border-radius: 50%; background: #f472b6; box-shadow: 0 0 0 2px #0c1020; animation: ltPulse 1.8s ease-out infinite; }
body.lt-app .lt-rules-dot[hidden] { display: none; }
@keyframes ltPulse { 0% { box-shadow: 0 0 0 2px #0c1020, 0 0 0 0 rgba(244,114,182,.6); } 70%, 100% { box-shadow: 0 0 0 2px #0c1020, 0 0 0 .5rem rgba(244,114,182,0); } }
body.lt-app .lt-player-card { border-radius: 1.5rem; padding: .8rem .9rem; }
body.lt-app .lt-avatar { border-radius: 50%; font-weight: 900; }
body.lt-app #activePlayerName { font-weight: 900; font-size: 1.05rem; }
body.lt-app #activePlayerScore { font-weight: 900; font-size: 2rem; }
body.lt-app .lt-phase-card { border-radius: 2rem; }
body.lt-app .lt-phase-card h2 { font-weight: 900; letter-spacing: -.025em; }
body.lt-app .lt-eyebrow { font-weight: 800; letter-spacing: .14em; color: #67e8f9; }
body.lt-app .lt-leaderboard-card { border-radius: 1.5rem; }
body.lt-app .lt-leader-row { border-radius: 1rem; }
body.lt-app .lt-leader-row.is-me { background: rgba(103,232,249,.1); border-color: rgba(103,232,249,.35); }

body.lt-app .lt-share-button, body.lt-app .lt-share-inline {
    display: flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; cursor: pointer;
}
body.lt-app .lt-share-button {
    margin-top: .75rem; min-height: 2.8rem; border-radius: 999px; font-weight: 800; font-size: .85rem;
    color: #fff; background: var(--lv-live); border: 0; box-shadow: inset 0 1px 0 #ffffff40;
}
body.lt-app .lt-share-inline { margin: 1rem 0 .4rem; }
body.lt-app [aria-busy="true"] { opacity: .6; pointer-events: none; }

/* Round recap + streak */
body.lt-app .lt-recap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; margin: .9rem 0 .2rem; }
body.lt-app .lt-recap > span:not(.lt-streak) { padding: .45rem .9rem; border-radius: 999px; font-size: .86rem; font-weight: 800; color: #e2e8f0; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
body.lt-app .lt-recap.is-exact > span:not(.lt-streak) { color: #052e16; background: #6ee7b7; border-color: transparent; }
body.lt-app .lt-streak { padding: .45rem .8rem; border-radius: 999px; font-size: .82rem; font-weight: 900; color: #fff; background: linear-gradient(115deg, #f97316, #ec4899); animation: ltPop .5s var(--lv-bounce) both; }
@keyframes ltPop { from { transform: scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }

/* Reaction bar: the phone's own game bar */
body.lt-app .lt-react-bar { display: none; }
body.lt-app.lt-in-game .lt-react-bar {
    position: fixed; z-index: 40; left: 50%; bottom: max(.6rem, env(safe-area-inset-bottom)); transform: translateX(-50%);
    display: flex; gap: .25rem; padding: .4rem; border-radius: 999px; max-width: calc(100vw - 1.2rem);
    background: var(--lv-glass), rgba(21,27,46,.72); border: 1px solid #ffffff2b; border-top-color: #ffffff45;
    box-shadow: var(--lv-spec), 0 10px 30px #0008;
    backdrop-filter: blur(26px) saturate(180%); -webkit-backdrop-filter: blur(26px) saturate(180%);
}
body.lt-app .lt-react-bar button {
    width: 3.1rem; height: 3.1rem; border-radius: 50%; border: 0; cursor: pointer; font-size: 1.55rem; line-height: 1;
    background: rgba(255,255,255,.06); transition: transform .35s var(--lv-spring), opacity .2s;
}
body.lt-app .lt-react-bar button:active { transform: scale(1.25); }
body.lt-app .lt-react-bar.is-cooling button { opacity: .45; }
/* Hidden toasts sit fully off screen; in a game they rise above the reaction bar. */
body.lt-app .lt-toast { border-radius: 1.2rem; transform: translateY(calc(100% + 2rem + var(--lt-react-h))); visibility: hidden; transition: transform 180ms ease, visibility 0s 180ms; }
body.lt-app .lt-toast.is-visible { transform: none; visibility: visible; transition: transform 180ms ease; }
body.lt-app.lt-in-game .lt-toast { bottom: calc(var(--lt-react-h) + 1.2rem + env(safe-area-inset-bottom)); }

body.lt-app .lt-reaction-layer { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
body.lt-app .lt-reaction { position: absolute; left: var(--x); bottom: calc(var(--lt-react-h) + 1rem); display: grid; justify-items: center; gap: .15rem; transform: translateX(-50%); animation: ltFloat 3s cubic-bezier(.2,.7,.3,1) forwards; }
body.lt-app .lt-reaction b { font-size: 2.6rem; line-height: 1; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
body.lt-app .lt-reaction.is-mine b { font-size: 3.2rem; }
body.lt-app .lt-reaction small { padding: .1rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 900; color: #0c1020; background: hsl(var(--h, 280) 80% 72%); }
@keyframes ltFloat { 0% { opacity: 0; transform: translate(-50%, 1rem) scale(.6); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -55vh) scale(.9) rotate(-8deg); } }

/* Rules sheet */
body.lt-app .lt-sheet { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; background: rgba(4,6,14,.6); opacity: 0; transition: opacity .25s; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
body.lt-app .lt-sheet[hidden] { display: none; }
body.lt-app .lt-sheet.is-open { opacity: 1; }
body.lt-app .lt-sheet-panel {
    width: 100%; max-width: 34rem; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
    padding: .6rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom)); border-radius: 1.75rem 1.75rem 0 0;
    background: var(--lv-glass), rgba(17,22,40,.97); border: 1px solid var(--lv-rim); border-bottom: 0; box-shadow: var(--lv-spec);
    transform: translateY(100%); transition: transform .5s var(--lv-spring);
}
body.lt-app .lt-sheet.is-open .lt-sheet-panel { transform: none; }
body.lt-app .lt-sheet-grab { display: block; width: 2.6rem; height: .3rem; margin: 0 auto .8rem; border-radius: 99px; background: rgba(255,255,255,.28); }
body.lt-app .lt-sheet-panel h2 { margin: 0 0 .9rem; font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; color: #fff; text-align: center; }
body.lt-app .lt-rules-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
body.lt-app .lt-rules-list li { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem .8rem; border-radius: 1.15rem; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08); animation: ltRuleIn .45s var(--lv-spring) both; animation-delay: calc(var(--i, 0) * 50ms); }
@keyframes ltRuleIn { from { opacity: 0; transform: translateY(.6rem); } to { opacity: 1; transform: none; } }
body.lt-app .lt-rule-icon { width: 2.4rem; height: 2.4rem; flex: none; display: grid; place-items: center; border-radius: .8rem; font-size: 1.25rem; background: rgba(103,232,249,.1); border: 1px solid rgba(103,232,249,.22); }
body.lt-app .lt-rules-list strong { display: block; font-size: .95rem; font-weight: 800; color: #fff; }
body.lt-app .lt-rules-list small { display: block; margin-top: .15rem; font-size: .8rem; line-height: 1.45; color: var(--lv-muted); }
body.lt-app .lt-rules-empty { justify-content: center; text-align: center; color: var(--lv-muted); font-size: .88rem; }
body.lt-app .lt-sheet-close { width: 100%; }

@media (prefers-reduced-motion: reduce) {
    body.lt-app :is(.lt-reaction, .lt-rules-list li, .lt-streak, .lt-rules-dot) { animation: none; }
    body.lt-app .lt-sheet-panel { transition: none; }
}

/* Bopstarr, the 3D DJ (phase 5). Each <bopstarr-3d> holds its poster picture,
   shown until incl/bopstarr3d.js defines the element. */
body.lt-app bopstarr-3d { display: block; }
body.lt-app bopstarr-3d:not(:defined) img { display: block; width: 100%; height: 100%; object-fit: contain; }
body.lt-app .lt-waiting-dj { width: 8.5rem; height: auto; aspect-ratio: 4 / 5; margin: 0 auto .6rem; }
body.lt-app .lt-waiting-dj .lt-dj { width: 100%; height: 100%; filter: drop-shadow(0 14px 18px rgba(31,8,60,.55)); }
body.lt-app .lt-final-dj { width: 7rem; aspect-ratio: 4 / 5; margin: 0 auto .2rem; filter: drop-shadow(0 14px 18px rgba(31,8,60,.55)); }
body.lt-app .lt-final-dj .lt-dj { width: 100%; height: 100%; }
body.lt-app .lt-recap-dj { width: 3rem; aspect-ratio: 4 / 5; flex: none; margin: -.4rem -.1rem -.4rem 0; }

/* Beat Keeper (2026-10): the pad itself is css/bop-beat.css. */
body.lt-app .lt-beat-layout { display: grid; justify-items: center; gap: 1.1rem; text-align: center; }
body.lt-app .lt-beat-layout .lt-phase-heading p { max-width: 22rem; margin-inline: auto; }
body.lt-app .lt-beat-counter { margin: 0; color: rgba(226, 232, 240, .7); font-size: .9rem; font-weight: 700; }
body.lt-app .lt-beat-recap small { display: block; margin-top: .15rem; font-weight: 600; opacity: .75; }
body.lt-app .lt-beat-recap > span { border-radius: 1rem; }