.phone-status {
    position: absolute; top: max(24px, env(safe-area-inset-top)); right: max(24px, env(safe-area-inset-right));
    z-index: 5; width: 194px; height: 70px; display: flex; align-items: center; gap: 10px;
    padding: 8px 11px; border: 1px solid #ffffff70; border-radius: 16px;
    background: linear-gradient(145deg, rgba(231, 242, 243, .40), rgba(176, 198, 201, .25));
    box-shadow: inset 0 1px 0 #ffffff80, 0 8px 24px #07181f26;
    backdrop-filter: blur(9px) saturate(.8); -webkit-backdrop-filter: blur(9px) saturate(.8);
    color: #fff; pointer-events: none;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity 650ms ease, transform 650ms cubic-bezier(.22,1,.36,1), visibility 650ms;

}
.phone-copy { position: relative; }
/* Keep the glass still: only the small highlight layer rotates. */
.phone-orbit {
    position: absolute; inset: -1px; padding: 1px; border-radius: inherit;
    overflow: hidden; pointer-events: none; isolation: isolate;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: .8;
}
.phone-orbit-light {
    position: absolute; left: 50%; top: 50%; width: 250px; height: 250px;
    background: conic-gradient(from 0deg, transparent 0deg 80deg,
        #ffffff30 110deg, #fff 140deg, transparent 160deg 260deg,
        #ffffff30 290deg, #fff 320deg, transparent 340deg);
    transform: translate(-50%, -50%) rotate(0turn);
    will-change: transform;
    animation: phone-orbit 8s linear infinite;
}
.phone-portrait { position: relative; flex: 0 0 40px; height: 50px; overflow: hidden; border-radius: 11px; background: #36474c; border: 1px solid #ffffffb3; }
.phone-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .8; transition: opacity .5s; }
.phone-scan { position: absolute; inset: 0; background: linear-gradient(transparent 42%, #ffffff1a 49%, #ffffff88 50%, transparent 52%); transform: translateY(-100%); opacity: 0; }
.phone-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.phone-eyebrow { font-size: 8px; font-weight: 500; letter-spacing: .2em; color: #354e58b3; }
.phone-copy strong { font-size: 11px; font-weight: 500; letter-spacing: .015em; white-space: nowrap; }
.phone-detail { display: flex; align-items: center; gap: 5px; font-size: 8px; color: #c3ccd8a6; white-space: nowrap; }
.phone-dot { width: 4px; height: 4px; border-radius: 50%; background: #c3ccd877; }
.phone-signal { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); display: flex; align-items: end; gap: 3px; height: 14px; }
.phone-signal i { width: 3px; height: 5px; background: rgba(255,255,255,.55); border-radius: 2px; }
.phone-signal i:nth-child(2) { height: 9px; } .phone-signal i:nth-child(3) { height: 14px; }
.phone-status[data-state="live"] .phone-orbit { opacity: 1; }
.phone-status[data-state="live"] .phone-portrait img { opacity: 1; }
.phone-status[data-state="live"] .phone-dot { background: #c6f4e4; box-shadow: 0 0 6px #c6f4e466; }
.phone-status[data-state="live"] .phone-signal i { background: #fff; box-shadow: 0 0 4px #ffffff30; }
.phone-scan { display: none; }
.phone-status[data-state="weak"] .phone-dot { background: #e1c9a1; }
.phone-status[data-state="weak"] .phone-signal i:first-child { background: #fff; }
@keyframes phone-orbit { to { transform: translate(-50%, -50%) rotate(1turn); } }
@keyframes phone-scan { 0%, 20% { transform: translateY(-100%); } 65%, 100% { transform: translateY(100%); } }
@media (max-width: 650px) {
    .phone-status { top: max(12px, env(safe-area-inset-top)); right: 12px; width: 162px; height: 60px; padding: 8px; gap: 8px; border-radius: 14px; }
    .phone-portrait { flex-basis: 32px; height: 42px; border-radius: 8px; }
    .phone-copy { gap: 4px; } .phone-copy strong { font-size: 10px; }
    .phone-eyebrow { font-size: 7px; } .phone-detail { font-size: 7px; }
    .phone-signal { right: 10px; gap: 2px; }
    /* Leave the centered game logo a clear row beneath the connection card. */
    .frame .game-logo { top: 88px; }
}
@media (prefers-reduced-motion: reduce) { .phone-orbit-light, .phone-scan { animation: none !important; } }

.phone-status.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.phone-status:not(.is-visible) .phone-orbit-light { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .phone-status { transition: none; transform: none; }
}

/* The TV button: the phone card's glass and its orbiting edge light, as a circle. */
.tv-dock {
    position: absolute; z-index: 8; bottom: max(24px, env(safe-area-inset-bottom)); right: max(24px, env(safe-area-inset-right));
    display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity 650ms ease 240ms, transform 650ms cubic-bezier(.22,1,.36,1) 240ms, visibility 650ms;
}
.tv-dock.is-visible { opacity: 1; visibility: visible; transform: none; }
.tv-button, .tv-pop {
    border: 1px solid #ffffff70; color: #fff;
    background: linear-gradient(145deg, rgba(231, 242, 243, .40), rgba(176, 198, 201, .25));
    box-shadow: inset 0 1px 0 #ffffff80, 0 8px 24px #07181f26;
    backdrop-filter: blur(9px) saturate(.8); -webkit-backdrop-filter: blur(9px) saturate(.8);
}
.tv-button {
    position: relative; width: 54px; height: 54px; padding: 0; border-radius: 50%;
    display: grid; place-items: center;
    transition: transform .25s ease, background .25s ease;
}
.tv-button svg { position: relative; width: 23px; height: 23px; filter: drop-shadow(0 1px 2px #07181f40); }
.tv-button:hover, .tv-button[aria-expanded="true"] {
    background: linear-gradient(145deg, rgba(240, 248, 249, .50), rgba(190, 210, 213, .32)); transform: translateY(-1px);
}
.tv-button:active { transform: scale(.96); }
.tv-dock:not(.is-visible) .phone-orbit-light { animation-play-state: paused; }
.tv-pop { width: 214px; padding: 12px 14px; border-radius: 16px; display: flex; flex-direction: column; gap: 6px; }
.tv-pop[hidden] { display: none; }
.tv-pop-title { font-size: 8px; font-weight: 600; letter-spacing: .2em; color: #ffffffd0; }
.tv-pop strong { font-size: 15px; font-weight: 600; letter-spacing: .01em; }
.tv-pop-note { font-size: 9px; color: #ffffffc0; }
@media (max-width: 650px) { .tv-dock { bottom: max(14px, env(safe-area-inset-bottom)); right: 12px; } .tv-button { width: 46px; height: 46px; } }
@media (prefers-reduced-motion: reduce) { .tv-dock { transition: none; transform: none; } }

.race-summary {
    position: absolute; z-index: 5; right: max(24px, env(safe-area-inset-right));
    top: calc(max(24px, env(safe-area-inset-top)) + 84px);
    display: flex; align-items: center; gap: 12px; width: 300px; height: 84px;
    color: #fff; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity 650ms ease 120ms, transform 650ms cubic-bezier(.22,1,.36,1) 120ms, visibility 650ms;
}
.race-summary.is-visible { opacity: 1; visibility: visible; transform: none; }
.race-ring { position: relative; flex: 0 0 82px; height: 82px; }
.race-ring > svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 9; }
.race-ring-track { stroke: #ffffff25; }
.race-ring-fill { stroke: #fff; stroke-dasharray: 62 100; stroke-linecap: round; }
.race-ring-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; }
.race-ring-label svg { width: 18px; height: 18px; }
.race-ring-label strong { font-size: 19px; letter-spacing: -.04em; }
.race-glass {
    flex: 1; min-width: 0; padding: 10px 12px; height: 84px; border-radius: 18px;
    border: 1px solid #ffffff70;
    background: linear-gradient(145deg, rgba(231,242,243,.40), rgba(176,198,201,.25));
    backdrop-filter: blur(9px) saturate(.8); -webkit-backdrop-filter: blur(9px) saturate(.8);
    box-shadow: inset 0 1px 0 #ffffff80, 0 8px 24px #07181f26;
}
.race-heading { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.race-heading > strong { font-size: 25px; line-height: 1; letter-spacing: -.045em; }
.race-heading > strong span { font-size: 22px; }
.race-heading > span { font-size: 8px; font-weight: 600; color: #ffffffe0; }
.race-segments {
    height: 12px; margin: 7px 0 8px;
    background: linear-gradient(90deg, #fff 62%, #ffffff24 62%);
    -webkit-mask: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 7px);
    mask: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 7px);
}
.race-metrics { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.race-metrics > span { display: flex; gap: 5px; align-items: center; white-space: nowrap; }
.race-metrics svg { width: 13px; height: 13px; flex-shrink: 0; }
.race-metrics strong { font-size: 12px; font-weight: 600; letter-spacing: -.025em; }
.race-metrics strong span { font-weight: 500; font-size: 10px; }
@media (max-width: 650px) {
    .race-summary { right: 12px; top: calc(max(12px, env(safe-area-inset-top)) + 72px); width: 270px; gap: 9px; }
    .race-ring { flex-basis: 70px; height: 70px; }
    .race-ring-label strong { font-size: 17px; }
    .race-glass { padding: 10px; }
    .race-heading { gap: 6px; }
    .race-heading > strong { font-size: 23px; }
    .race-heading > span { font-size: 7px; }
    .frame .game-logo { top: 180px; width: min(48vw, 25vh, 230px); }
    .frame .game-logo.square { width: min(32vw, 19vh, 150px); }
}
@media (prefers-reduced-motion: reduce) { .race-summary { transition: none; transform: none; } }

.race-fire-icon { width: 20px; height: 20px; object-fit: contain; }
.race-foot-icon { width: 14px; height: 16px; object-fit: contain; flex-shrink: 0; }

/* the dock's column: your controller (the training) on top, the TV in the corner below it */
.dock-row { display: flex; flex-direction: column; gap: 10px; }
/* the cards come in softly: up a little and into focus */
@keyframes dock-pop-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.tv-pop:not([hidden]) { animation: dock-pop-in .38s cubic-bezier(.22, 1, .36, 1); transform-origin: bottom right; }
@keyframes dock-pop-out { to { opacity: 0; transform: translateY(8px) scale(.98); } }
.tv-pop.leaving { animation: dock-pop-out .3s ease forwards; }
/* the invitation's own clock: a hairline along its foot that runs down, then it goes */
.train-pop { position: relative; }
@keyframes dock-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.train-pop.timed::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; border-radius: 2px;
    background: rgba(255, 255, 255, .55); transform-origin: left; animation: dock-timer var(--invite-ms, 8s) linear forwards; }
@media (prefers-reduced-motion: reduce) { .tv-pop:not([hidden]), .tv-pop.leaving { animation: none; } .train-pop.timed::after { animation: none; opacity: 0; } }
.train-pop { width: 248px; }
.train-pop strong { font-size: 16px; }
.train-pop .tv-pop-note { line-height: 1.45; }
.train-go { margin-top: 6px; display: block; text-align: center; text-decoration: none; font-size: 13px; font-weight: 600;
    color: #0d1a20; padding: 10px 12px; border-radius: 12px; background: linear-gradient(180deg, #fff, #e6eef0); box-shadow: 0 6px 16px #07181f33; }
.train-go:hover { filter: brightness(1.05); }
.train-go:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
#phone-status[role=button] { cursor:pointer; pointer-events:auto; }
#phone-status:focus-visible { outline:2px solid #bfb7ff; outline-offset:4px; }

#tv-pop { width:min(300px,calc(100vw - 52px)); padding:20px; gap:12px; }
#tv-pop #tv-url { overflow-wrap:anywhere; font-size:14px; line-height:1.45; }
#tv-pop .tv-pop-note { font-size:11px; line-height:1.6; color:#fff; }
.tv-beta { align-self:flex-start; font-size:9px; font-weight:700; letter-spacing:.12em; border:1px solid #ffffff50; border-radius:6px; padding:4px 7px; }
.gallery-recovery { position:absolute; z-index:12; left:50%; top:50%; transform:translate(-50%,-50%); box-sizing:border-box; width:min(420px,90vw); padding:30px; border:1px solid #ffffff70; border-radius:24px; background:#243447ee; color:white; font:14px/1.6 Montserrat,Arial,sans-serif; text-align:center; }
.gallery-recovery h2 { font-size:22px; line-height:1.3; }
.gallery-recovery button { background:white; color:#243447; border:0; border-radius:10px; padding:12px 20px; cursor:pointer; font:600 13px Arial,sans-serif; }

#tv-pop { background:linear-gradient(145deg,#294047dd,#162932e6); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }