/* TV-only layout; palette and controls follow host-setup.css. */
* { box-sizing: border-box; }
body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px;
    background: radial-gradient(ellipse at 50% 35%, #171f2c, #080c12 75%);
    color: #e3eaf5;
    font-family: 'Roboto', sans-serif;
}
.tv-connection {
    width: min(100%, 640px);
    padding: clamp(28px, 3vw, 48px);
    border: 1px solid #495970;
    border-radius: 12px;
    background: radial-gradient(ellipse at 45% 0, #1b2433, #0c1119 75%);
    box-shadow: inset 0 1px 1px #ffffff0d;
    text-align: center;
}
.tv-brand {
    margin: 0 0 12px;
    color: #aebbd0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .12em;
}
h1 {
    margin: 0;
    font-family: 'Roboto Condensed', 'Roboto', sans-serif;
    font-size: clamp(30px, 2.4vw, 40px);
    line-height: 1.15;
    font-weight: 700;
}
.tv-instruction {
    margin: 20px 0 28px;
    color: #aebbd0;
    font-size: 20px;
    line-height: 1.5;
}
.tv-pin-label {
    display: block;
    margin-bottom: 10px;
    color: #aebbd0;
    font-size: 16px;
    font-weight: 600;
}
.pin-input {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #495970;
    border-radius: 8px;
    background: #080e17;
    color: #f6f8ff;
    font: 900 clamp(72px, 6vw, 96px) / 1.2 'Roboto', sans-serif;
    font-variant-numeric: tabular-nums;
    text-align: center;
    /* Balanced tracking keeps all four digits centered, including leading zero. */
    letter-spacing: .14em;
    text-indent: .14em;
    caret-color: #f6f8ff;
}
.pin-input::placeholder { color: #68778e; opacity: 1; }
.pin-input:focus { border-color: #b1c4df; }
.pin-input[aria-invalid="true"] { border-color: #b97580; }
.tv-connect {
    width: 100%;
    min-height: 64px;
    margin-top: 24px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px solid #8495ae;
    border-radius: 8px;
    background: linear-gradient(145deg, #34445c, #202d40);
    color: #f6f8ff;
    font: 700 22px / 1.2 'Roboto Condensed', 'Roboto', sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: inset 0 1px 2px #fff1, 0 2px 4px #0004;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.tv-connect:hover:not(:disabled) {
    background: linear-gradient(145deg, #273449, #111925);
    border-color: #b1c4df;
}
.tv-connect:disabled { opacity: .4; cursor: not-allowed; }
:is(.pin-input, .tv-connect):focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
.tv-spinner {
    display: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ffffff40;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: tv-spin .8s linear infinite;
}
.tv-connect[aria-busy="true"] .tv-spinner { display: inline-block; }
.tv-status {
    min-height: 3em;
    margin: 20px 0 0;
    color: #e2a1ab;
    font-size: 18px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
@keyframes tv-spin { to { transform: rotate(360deg); } }
@media (max-width: 480px), (max-height: 620px) {
    body { padding: 16px; }
    .tv-connection { padding: 24px; }
    .tv-instruction { margin: 16px 0 20px; font-size: 18px; }
    .pin-input { font-size: 64px; }
    .tv-connect { margin-top: 20px; }
    .tv-status { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .tv-connect { transition: none; }
    .tv-spinner { animation: none; }
}