/* Sky theme foundation. Opt in on ONE screen; never on html/body.
 * Native-point typography and controls; no game-coordinate dependencies.
 * Server composition is intentionally in server.css, not in these tokens. */
.theme-sky {
    color-scheme: light;
    --sky-ink: #101b3b;
    --sky-muted: #425c76;
    --sky-accent: #147cac;
    --sky-blue-top: #1878b0;
    --sky-blue-bottom: #2375af;
    --sky-positive: #197344;
    --sky-locked: #805300;
    --sky-danger: #a73349;
    --sky-line: rgba(255, 255, 255, .94);
    --sky-panel: rgba(239, 250, 255, .88);
    --sky-radius-panel: 24px;
    --sky-radius-card: 17px;
    --sky-radius-button: 14px;
    --sky-shadow: 0 5px 18px rgba(32, 117, 157, .17);
    --sky-background: url("islands-background.png");
    background: #96d5f6 var(--sky-background) center / cover no-repeat;
    color: var(--sky-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-shadow: none;
    -webkit-font-smoothing: antialiased;
}
.theme-sky .sky-panel {
    border: 1.5px solid var(--sky-line);
    border-radius: var(--sky-radius-panel);
    background: var(--sky-panel);
    box-shadow: var(--sky-shadow), inset 0 1px 0 #fff;
    /* Static painted sky + opaque-enough surfaces avoid a costly full-screen blur. */
}
.theme-sky .sky-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 22px;
    border: 1.5px solid #8de3ff;
    border-radius: var(--sky-radius-button);
    background: linear-gradient(var(--sky-blue-top), var(--sky-blue-bottom));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), var(--sky-shadow);
    color: #fff;
    font: 750 16px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-shadow: none;
    touch-action: manipulation;
    cursor: pointer;
}
.theme-sky .sky-button-secondary {
    border-color: #a7c8dd;
    background: #f7fcff;
    color: var(--sky-ink);
}
.theme-sky .sky-button-danger {
    border-color: #db8a9a;
    background: #ffedf0;
    color: var(--sky-danger);
}
.theme-sky button:active:not(:disabled) { filter: brightness(.96); }
.theme-sky button:disabled { opacity: .55; cursor: default; }
.theme-sky button:focus-visible,
.theme-sky input:focus-visible { outline: 3px solid #165f96; outline-offset: 3px; }
.theme-sky .sky-icon {
    flex: 0 0 23px;
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
.theme-sky .sky-presence {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border: 1.5px solid #b1e7ff;
    border-radius: 40px;
    background: #236f9f;
    box-shadow: var(--sky-shadow);
    color: #fff;
    font-size: 15px;
    font-weight: 750;
}
.theme-sky .sky-presence::before {
    content: "";
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #52df6c;
}
.theme-sky .sky-brand {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    /* Generated art has a white matte, intentionally presented as a soft cloud
     * lockup. Never use a fake checkerboard or multiply away the golden colors. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
    mask-composite: intersect;
}
@media (prefers-contrast: more) {
    .theme-sky { --sky-panel: #effaff; --sky-muted: #253d55; --sky-line: #719bb9; }
}
@media (prefers-reduced-transparency: reduce) {
    .theme-sky { --sky-panel: #effaff; }
}

/* Native top-layer sheet: stays above every page/room popup and cannot be
 * dismissed by a toast timeout, background tap, polling, or Escape. */
#clientUpdateDialog {
    box-sizing: border-box;
    width: min(560px, calc(100vw - 2 * max(20px, env(safe-area-inset-left), env(safe-area-inset-right))));
    max-height: calc(100dvh - 24px);
    margin: auto;
    padding: 20px;
    border: 2px solid #fff;
    border-radius: 22px;
    background: #effaff;
    box-shadow: 0 12px 45px #153d6770;
    font-size: 16px;
    line-height: 1.45;
}
#clientUpdateDialog[open] { display: flex; flex-direction: column; gap: 16px; }
#clientUpdateDialog::backdrop { background: #10244499; }
#clientUpdateDialog .clientUpdateContent { overflow-y: auto; min-height: 0; touch-action: pan-y; }
#clientUpdateDialog h2 { margin: 0 0 10px; font-size: 23px; line-height: 1.2; }
#clientUpdateDialog p { margin: 0; }
#clientUpdateDialog #clientUpdateHelp { margin-top: 12px; color: var(--sky-muted); }
#clientUpdateDialog footer { display: flex; flex: 0 0 auto; justify-content: flex-end; gap: 12px; }
#clientUpdateOK { min-width: 90px; }