:root {
    --bg: #191c17;
    --surface: #22261e;
    --surface-alt: #2a2f24;
    --primary: #c4a35a;
    --primary-dim: #8a7340;
    --danger: #a83232;
    --danger-bg: #2e1414;
    --safe: #2a7a3a;
    --safe-bg: #142e1a;
    --text: #d4cbb8;
    --muted: #7a7562;
    --border: #3a3e35;
    --tab-active: #c4a35a;
    --tab-inactive: #555248;
    --gauge-fr: #4a6fa5;
    --gauge-de: #a83232;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100dvh;
    line-height: 1.5;
}

#app {
    max-width: 480px;
    margin: 0 auto;
    padding: 16px;
}

/* ═══ HEADER ═══ */
header { text-align: center; padding: 16px 0 12px; }
.header-bar h1 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.6em;
    color: var(--primary);
    letter-spacing: 1px;
}
.subtitle {
    color: var(--muted);
    font-style: italic;
    font-size: 0.85em;
    margin-top: 2px;
    font-family: Georgia, 'Times New Roman', serif;
}

/* ═══ PRIVACY SCREEN ═══ */
#privacy-screen {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #0d0f0b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.privacy-content {
    text-align: center;
    padding: 40px 20px;
}
.privacy-icon {
    font-size: 3em;
    margin-bottom: 16px;
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}
.privacy-content h1 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.8em;
    color: var(--primary);
    margin-bottom: 8px;
}
.privacy-morse {
    font-family: 'Courier New', monospace;
    color: var(--muted);
    font-size: 1.1em;
    letter-spacing: 4px;
    margin-bottom: 24px;
}
.privacy-badge {
    background: var(--surface-alt);
    border: 1px solid var(--primary-dim);
    border-radius: 8px;
    padding: 12px 20px;
    margin: 16px auto;
    max-width: 260px;
    color: var(--primary);
    font-weight: bold;
    font-size: 1.1em;
    cursor: pointer;
}
.privacy-tap {
    color: var(--muted);
    font-size: 0.85em;
    margin-top: 24px;
    animation: blink 2.5s ease-in-out infinite;
}
@keyframes blink {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* ═══ STATUS ═══ */
.status {
    text-align: center;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.8em;
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.status.connected { background: #1b3322; color: #6abf7b; }
.status.disconnected { background: #331414; color: #e05555; }
.status.reconnecting { background: #332e14; color: #d4b84a; }

/* ═══ LOBBY ═══ */
.field-label {
    display: block;
    font-size: 0.75em;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
#name-input-section { margin-bottom: 14px; }

input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    font-size: 1em;
}
input[type="text"]:focus {
    outline: none;
    border-color: var(--primary-dim);
}

select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.95em;
    -webkit-appearance: none;
    appearance: none;
}

.actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.join-group { display: flex; gap: 8px; }
.join-group input {
    flex: 1;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 3px;
    font-family: 'Courier New', monospace;
}
.lobby-switch {
    display: block;
    text-align: center;
    margin-top: 10px;
    color: var(--muted);
    font-size: 0.85em;
    text-decoration: none;
}
.lobby-switch:hover { color: var(--primary); }

button {
    padding: 10px 14px;
    border: none;
    border-radius: 4px;
    font-size: 0.95em;
    cursor: pointer;
    background: var(--primary);
    color: var(--bg);
    font-weight: 600;
    transition: opacity 0.15s;
    letter-spacing: 0.5px;
}
button:hover { opacity: 0.85; }
button:disabled { opacity: 0.35; cursor: not-allowed; }

.btn-danger { background: var(--danger) !important; color: #fff !important; }
.btn-safe { background: var(--safe) !important; color: #fff !important; }
.btn-validate {
    width: 100%;
    background: var(--safe);
    color: #fff;
    font-size: 1.05em;
    padding: 14px;
}

#room-info {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 14px;
}
#room-info p { margin-bottom: 6px; }
#btn-cancel-room {
    margin-top: 8px;
    width: 100%;
    background: transparent;
    border: 1px solid var(--muted);
    color: var(--muted);
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
}
#btn-cancel-room:hover { border-color: var(--danger); color: var(--danger); }
#room-code {
    font-family: 'Courier New', monospace;
    font-size: 1.3em;
    letter-spacing: 4px;
    color: var(--primary);
}
#qr-code {
    text-align: center;
    margin: 12px 0;
}
#qr-code svg {
    width: 200px;
    height: 200px;
    background: #fff;
    border-radius: 8px;
    padding: 8px;
}
.btn-share {
    display: block;
    width: 100%;
    margin: 8px 0;
    padding: 10px;
    background: var(--primary);
    color: var(--bg);
    border: none;
    border-radius: 6px;
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
}
.btn-share:hover { opacity: 0.85; }
#player-list { list-style: none; margin: 8px 0; }
#player-list li { padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 0.9em; }

.hidden { display: none !important; }

/* ═══ TAB BAR ═══ */
#tab-bar {
    display: flex;
    gap: 2px;
    margin-bottom: 14px;
    background: var(--surface);
    border-radius: 6px;
    padding: 3px;
    border: 1px solid var(--border);
}
.tab-btn {
    flex: 1;
    background: transparent;
    color: var(--tab-inactive);
    font-size: 0.8em;
    padding: 8px 4px;
    border-radius: 4px;
    letter-spacing: 0;
    font-weight: 500;
    position: relative;
    transition: all 0.15s;
}
.tab-btn.active {
    background: var(--surface-alt);
    color: var(--primary);
    font-weight: 600;
}
.badge {
    background: var(--danger);
    color: #fff;
    font-size: 0.7em;
    padding: 1px 5px;
    border-radius: 10px;
    margin-left: 3px;
    font-weight: 700;
    vertical-align: middle;
}

/* ═══ TAB PANELS ═══ */
.tab-panel {
    animation: fadeIn 0.15s ease;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ═══ COVER MISSION ═══ */
.cover-card {
    border: 1px dashed var(--primary-dim);
}
.cover-instruction {
    display: block;
    font-size: 0.8em;
    color: var(--muted);
    margin-bottom: 4px;
}
.cover-word {
    font-family: 'Courier New', monospace;
    font-size: 1.3em;
    color: var(--primary);
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 10px;
    margin: 8px 0;
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
    text-align: center;
}
.cover-card button {
    width: 100%;
    margin-top: 4px;
}

/* ═══ MESSAGES TAB ═══ */
#send-word-section h3 {
    color: var(--primary);
    font-size: 0.9em;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
#send-word-section select { margin-bottom: 8px; }
.send-group { display: flex; gap: 8px; }
.send-group input { flex: 1; text-transform: uppercase; font-family: 'Courier New', monospace; letter-spacing: 1px; }
.send-group select { flex: 1; }
#cooldown-display { margin-top: 8px; color: var(--primary-dim); font-size: 0.85em; }

#game-log { margin-top: 4px; }
#game-log h3 {
    color: var(--muted);
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 4px;
}
#log-list {
    list-style: none;
    font-size: 0.85em;
    max-height: 55vh;
    overflow-y: auto;
}
#log-list li {
    padding: 6px 0;
    border-bottom: 1px solid rgba(58, 62, 53, 0.4);
    color: #9a937e;
    line-height: 1.4;
}
#log-list li:first-child { color: var(--text); }
#log-list li.log-highlight {
    color: var(--primary);
    font-weight: 600;
    background: rgba(196, 163, 90, 0.08);
    padding: 8px 6px;
    border-radius: 4px;
    border-left: 3px solid var(--primary);
}
.log-action-link {
    display: inline-block;
    background: var(--primary);
    color: var(--bg);
    border: none;
    border-radius: 3px;
    padding: 2px 10px;
    font-size: 0.85em;
    font-weight: 700;
    cursor: pointer;
    margin-left: 4px;
    vertical-align: middle;
}
.log-action-link:hover { opacity: 0.85; }

/* ═══ ACTIONS TAB ═══ */
.action-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
    border-left: 3px solid var(--border);
}
.action-card h3 {
    color: var(--primary);
    font-size: 0.9em;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.action-card select { margin-bottom: 8px; }
#denounce-section h3 { color: var(--danger); }
#denounce-section { border-left-color: var(--danger); }
.agent-card { border-left-color: #8e44ad; }
.agent-card h3 { color: #bb86fc; }
.operator-card { border-left-color: #e67e22; }
.operator-card h3 { color: #f0a050; }
.commander-card { border-left-color: #2980b9; }
.commander-card h3 { color: #5dade2; }

.power-block {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(58, 62, 53, 0.3);
}
.power-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.power-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.power-row select, .power-row input { flex: 1; }
.power-row button { white-space: nowrap; }
.full-width { width: 100%; }

.power-passive {
    background: rgba(196, 163, 90, 0.06);
    border-radius: 4px;
    padding: 10px;
    border-bottom: none;
}
.power-info {
    display: flex;
    align-items: center;
    gap: 8px;
}
.power-tag {
    font-size: 0.65em;
    background: var(--primary-dim);
    color: var(--bg);
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

.raid-alert {
    background: var(--danger-bg);
    border: 1px solid var(--danger);
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 8px;
    text-align: center;
    font-weight: 600;
}

/* Tribunal */
.tribunal-card {
    background: var(--danger-bg);
    border: 2px solid var(--danger);
    border-radius: 6px;
    padding: 14px;
    text-align: center;
    margin-bottom: 8px;
}
.tribunal-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    justify-content: center;
}
.tribunal-buttons button { flex: 1; max-width: 150px; padding: 12px; }
#tribunal-timer {
    color: var(--danger);
    font-family: 'Courier New', monospace;
    font-size: 1.3em;
    margin-top: 8px;
    font-weight: 700;
}

/* Validate */
#validate-section h3 { color: var(--safe); }
#repair-display {
    color: var(--primary-dim);
    margin-top: 8px;
    text-align: center;
    font-family: 'Courier New', monospace;
}

/* ═══ INTEL TAB ═══ */
.intel-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 14px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
}
.intel-card h3 {
    color: var(--primary);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}
.classified-stamp {
    position: absolute;
    top: 8px;
    right: -8px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 0.6em;
    color: rgba(168, 50, 50, 0.25);
    transform: rotate(12deg);
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    border: 2px solid rgba(168, 50, 50, 0.15);
    padding: 2px 10px;
    border-radius: 3px;
    pointer-events: none;
}

/* Notification status card */
.notif-card { border-color: var(--primary); }
.notif-body {
    font-size: 0.85em;
    line-height: 1.6;
}
.notif-body p { margin: 0 0 8px; }
.notif-body p:last-child { margin-bottom: 0; }
.notif-body .notif-ok {
    color: #6abe6a;
    font-weight: bold;
}
.notif-body .notif-steps {
    margin: 8px 0 0;
    padding: 10px 12px;
    background: var(--surface-alt);
    border-radius: 6px;
}
.notif-body .notif-steps ol {
    margin: 6px 0 0;
    padding-left: 1.4em;
}
.notif-body .notif-steps li {
    margin-bottom: 4px;
}
.notif-body .notif-reassure {
    margin-top: 10px;
    font-style: italic;
    opacity: 0.8;
}
#btn-enable-notif {
    margin-top: 8px;
    width: 100%;
}
.intel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}
.intel-item {
    text-align: center;
    padding: 8px 4px;
    background: var(--surface-alt);
    border-radius: 4px;
}
.intel-label {
    display: block;
    font-size: 0.65em;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.intel-item strong {
    color: var(--text);
    font-size: 0.85em;
}

/* Secret word */
.secret-card {
    background: #1a2e1f;
    border-color: #3a6a45;
}
.secret-word {
    font-family: 'Courier New', monospace;
    font-size: 1.4em;
    color: #7ddb8a;
    text-align: center;
    letter-spacing: 4px;
    text-transform: uppercase;
    padding: 8px;
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
}

/* Commander card */
.commander-card {
    background: #2e2814;
    border-color: #6a5a3a;
}

/* Gauges */
.gauge-desc {
    font-size: 0.78em;
    color: var(--muted);
    margin-bottom: 10px;
}
.gauge-bar { margin-bottom: 8px; }
.gauge-label { font-size: 0.8em; color: var(--muted); }
.gauge-track {
    height: 14px;
    background: rgba(0,0,0,0.3);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 3px;
    border: 1px solid var(--border);
}
.gauge-fill {
    height: 100%;
    width: 0%;
    border-radius: 2px;
    transition: width 0.5s ease;
}
.gauge-fill.resistance { background: linear-gradient(90deg, #3a5a8a, #5a8ac0); }
.gauge-fill.occupation { background: linear-gradient(90deg, #8a3232, #c05a5a); }

/* ═══ INLINE HELP ═══ */
.help-inline {
    margin-top: 6px;
    border-radius: 4px;
}
.help-inline summary {
    padding: 4px 8px;
    cursor: pointer;
    font-size: 0.75em;
    color: var(--muted);
    user-select: none;
    list-style: none;
}
.help-inline summary::-webkit-details-marker { display: none; }
.help-inline summary::before { content: "▸ "; }
.help-inline[open] summary::before { content: "▾ "; }
.help-inline[open] summary { color: var(--primary-dim); }
.help-inline .help-content {
    padding: 8px 10px;
    font-size: 0.78em;
    color: #9a937e;
    line-height: 1.5;
    background: rgba(0,0,0,0.15);
    border-radius: 0 0 4px 4px;
}
.help-inline .help-content strong { color: var(--primary); }
.help-inline .help-content ul { margin: 4px 0 4px 16px; }
.help-inline .help-content li { margin-bottom: 3px; }
.power-summary {
    font-size: 0.8em;
    color: #999;
    margin: -4px 0 8px 0;
    font-style: italic;
    line-height: 1.3;
}
.help-example {
    margin-top: 6px;
    padding: 6px 8px;
    background: rgba(196, 163, 90, 0.06);
    border-left: 2px solid var(--primary-dim);
    border-radius: 0 3px 3px 0;
    font-style: italic;
}

/* ═══ HELP ZONES (Intel tab) ═══ */
.help-zone {
    margin-bottom: 8px;
    border-radius: 4px;
    border: 1px solid var(--border);
    overflow: hidden;
}
.help-zone summary {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 0.82em;
    color: var(--muted);
    background: var(--surface);
    user-select: none;
    list-style: none;
}
.help-zone summary::-webkit-details-marker { display: none; }
.help-zone summary::before { content: "▸ "; }
.help-zone[open] summary::before { content: "▾ "; }
.help-zone[open] summary {
    color: var(--primary);
    border-bottom: 1px solid var(--border);
}
.help-zone .help-content {
    padding: 10px 12px;
    font-size: 0.8em;
    color: #9a937e;
    line-height: 1.5;
    background: rgba(22, 33, 30, 0.5);
}
.help-zone .help-content strong { color: var(--primary); }
.help-zone .help-content ul { margin: 4px 0 4px 16px; }
.help-zone .help-content li { margin-bottom: 2px; }

/* ═══ SPECTATOR ═══ */
#spectator-banner {
    background: var(--danger-bg);
    color: var(--danger);
    text-align: center;
    padding: 10px;
    border-radius: 4px;
    font-weight: 600;
    margin-bottom: 10px;
    border: 1px solid var(--danger);
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ═══ GAME OVER — FULL-SCREEN OVERLAY ═══ */

#game-over-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: go-fadein 0.8s ease-out;
}

/* Victory = dark green-gold, Defeat = dark red-black */
#game-over-overlay.victory { background: radial-gradient(ellipse at center, #1a2a14 0%, #0a0f08 70%); }
#game-over-overlay.defeat  { background: radial-gradient(ellipse at center, #2a1414 0%, #0a0808 70%); }

/* Vignette border shadow */
#game-over-vignette {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 120px 40px rgba(0,0,0,0.7);
    pointer-events: none;
}

/* Old film scanlines */
#game-over-scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.15) 2px,
        rgba(0,0,0,0.15) 4px
    );
    pointer-events: none;
    opacity: 0.5;
}

/* Central content block */
#game-over-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 32px 24px;
    max-width: 360px;
}

/* Stamp — the big verdict */
#game-over-stamp {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 1.8em;
    letter-spacing: 4px;
    text-transform: uppercase;
    padding: 12px 24px;
    border: 4px solid;
    border-radius: 4px;
    display: inline-block;
    transform: rotate(-6deg);
    animation: go-stamp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
    margin-bottom: 24px;
}

.victory #game-over-stamp {
    color: #4a7a2e;
    border-color: #4a7a2e;
    box-shadow: 0 0 30px rgba(74, 122, 46, 0.3);
}
.defeat #game-over-stamp {
    color: #a83232;
    border-color: #a83232;
    box-shadow: 0 0 30px rgba(168, 50, 50, 0.3);
}

/* Title — team name */
#game-over-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.3em;
    margin-bottom: 12px;
    animation: go-slidein 0.6s ease-out 0.7s both;
}
.victory #game-over-title { color: var(--primary); }
.defeat  #game-over-title { color: #8a6060; }

/* Reason text */
#game-over-reason {
    font-size: 0.9em;
    line-height: 1.5;
    animation: go-slidein 0.6s ease-out 0.9s both;
}
.victory #game-over-reason { color: var(--muted); }
.defeat  #game-over-reason { color: #6a5050; }

/* Emblem — decorative icon */
#game-over-emblem {
    margin-top: 28px;
    font-size: 2.4em;
    animation: go-pulse 2s ease-in-out 1.2s infinite;
    opacity: 0;
    animation-fill-mode: forwards;
}

/* Close button */
#game-over-close {
    margin-top: 32px;
    padding: 10px 28px;
    font-family: inherit;
    font-size: 0.95em;
    letter-spacing: 1px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 4px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    opacity: 0;
    animation: go-slidein 0.5s ease-out 2s both;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
#game-over-close:hover {
    background: rgba(255,255,255,0.18);
    color: #fff;
    border-color: rgba(255,255,255,0.5);
}

/* Particles container */
#game-over-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

/* Individual particle (created via JS) */
.go-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    opacity: 0;
}

/* Victory particles: golden sparks rising */
.victory .go-particle {
    background: var(--primary);
    animation: go-spark-rise 3s ease-out forwards;
}

/* Defeat particles: red embers falling */
.defeat .go-particle {
    background: #a83232;
    animation: go-ember-fall 4s ease-in forwards;
}

/* ═══ KEYFRAMES ═══ */

@keyframes go-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes go-stamp {
    0%   { transform: rotate(-6deg) scale(3); opacity: 0; }
    60%  { transform: rotate(-6deg) scale(0.95); opacity: 1; }
    80%  { transform: rotate(-6deg) scale(1.05); }
    100% { transform: rotate(-6deg) scale(1); opacity: 1; }
}

@keyframes go-slidein {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

@keyframes go-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.1); }
}

@keyframes go-spark-rise {
    0%   { transform: translateY(0) scale(1); opacity: 0.9; }
    100% { transform: translateY(-100vh) scale(0); opacity: 0; }
}

@keyframes go-ember-fall {
    0%   { transform: translateY(0) scale(1); opacity: 0.7; }
    50%  { opacity: 0.4; }
    100% { transform: translateY(100vh) scale(0); opacity: 0; }
}

/* Defeat-specific: screen flicker on entry */
.defeat #game-over-content {
    animation: go-flicker 0.15s ease-in-out 0.1s 3;
}
@keyframes go-flicker {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}


/* ═══ ERROR TOAST ═══ */
#error-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--danger);
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9em;
    z-index: 500;
    max-width: 90%;
    text-align: center;
}

/* Pull-to-refresh */
#ptr-indicator {
    position: fixed;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 2px solid var(--primary-dim);
    border-radius: 50%;
    color: var(--primary);
    z-index: 2000;
    transition: top 0.15s ease-out, opacity 0.15s ease-out;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
#ptr-indicator svg {
    transition: transform 0.1s ease-out;
}
#ptr-indicator.refreshing svg {
    animation: ptr-spin 0.7s ease-in-out infinite;
}
@keyframes ptr-spin {
    to { transform: rotate(360deg); }
}

/* Refresh flash banner */
#ptr-flash {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    font-size: 0.9em;
    color: var(--bg);
    background: var(--primary);
    z-index: 2001;
    animation: ptr-flash-in 2s ease-out forwards;
}
@keyframes ptr-flash-in {
    0%   { opacity: 1; transform: translateY(0); }
    70%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-100%); }
}