/* Connection problems: in-app notice (js/core/network-status.js), /offline.html, the Stall Runner game,
   and the big status code on the error pages (Views/Home). */

.net-overlay {
    position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center;
    padding: 1rem; background: rgba(31, 42, 68, .55); backdrop-filter: blur(3px); overflow-y: auto;
}
.net-overlay.show { display: flex; }
body.net-open { overflow: hidden; }

.net-card {
    width: 100%; max-width: 720px; margin: auto; padding: 1.75rem 1.5rem 1.25rem; text-align: center;
    background: var(--em-surface, #fff); color: var(--em-text, #1f2a44);
    border-radius: var(--em-radius, 14px); box-shadow: var(--em-shadow-lg, 0 18px 48px rgba(31, 42, 68, .16));
}
.net-icon {
    width: 64px; height: 64px; margin: 0 auto .75rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; background: var(--em-warning-bg, #fff4dc); color: var(--em-warning, #b97700);
}
.net-title { font-size: 1.35rem; font-weight: 700; margin: 0 0 .4rem; }
.net-text { color: var(--em-muted, #6b7590); margin: 0 auto 1rem; max-width: 520px; line-height: 1.5; }
.net-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.net-status { min-height: 1.2em; margin-top: .6rem; font-size: .85rem; color: var(--em-muted, #6b7590); }
.net-game:not(:empty) { margin-top: 1rem; }

/* Stall Runner */
.og-wrap { width: 100%; text-align: left; user-select: none; -webkit-user-select: none; }
.og-hud { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .25rem .75rem; font-size: .82rem; color: var(--em-muted, #6b7590); margin-bottom: .4rem; }
.og-hud b { color: var(--em-text, #1f2a44); }
.og-canvas { display: block; width: 100%; border-radius: var(--em-radius-sm, 10px); border: 1px solid var(--em-border, #e3e7f1); touch-action: manipulation; cursor: pointer; outline: none; }
.og-canvas:focus-visible { box-shadow: 0 0 0 3px var(--em-primary-100, #dfe3f6); }
.og-controls { display: none; gap: .5rem; margin-top: .5rem; }
.og-btn {
    flex: 1 1 0; min-height: 44px; border: 1px solid var(--em-primary, #3b4a9f); border-radius: 999px; background: var(--em-primary, #3b4a9f);
    color: #fff; font-weight: 600; font-size: .9rem; touch-action: manipulation;
}
.og-btn-light { background: transparent; color: var(--em-primary, #3b4a9f); }
.og-help { margin-top: .4rem; font-size: .75rem; color: var(--em-muted, #6b7590); text-align: center; }
/* Touch screens get big Jump / Duck / Pause buttons instead of the keyboard hint. */
@media (pointer: coarse) {
    .og-controls { display: flex; }
    .og-help { display: none; }
}

/* /offline.html (no Bootstrap: it must work from the cache). */
.offline-page {
    margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem;
    background: var(--em-bg, #f4f6fb); font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    box-sizing: border-box;
}
.net-card-page { box-sizing: border-box; }
.net-brand { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--em-primary, #3b4a9f); margin-bottom: 1rem; }
.btn-net {
    display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .5rem 1.1rem; border-radius: var(--em-radius-sm, 10px);
    border: 1px solid var(--em-primary, #3b4a9f); background: transparent; color: var(--em-primary, #3b4a9f);
    font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.btn-net-primary { background: var(--em-primary, #3b4a9f); color: #fff; }

/* Error pages: large status code above the icon. */
.error-page .error-code {
    font-size: clamp(3rem, 12vw, 5rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; margin-bottom: .5rem;
    background: linear-gradient(135deg, var(--em-primary, #3b4a9f), var(--em-accent, #7c5cdb));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

@media (max-width: 575.98px) {
    .net-card { padding: 1.25rem 1rem 1rem; }
    .net-title { font-size: 1.15rem; }
    .net-actions .btn, .net-actions .btn-net { flex: 1 1 100%; justify-content: center; }
}