/* absolute, не fixed: в рамка (iframe) Chrome изрязва закованите слоеве при превъртане на страницата */
:root { --bg: #070d16; --ink: #e8eef6; --mute: #8fa3bb; --acc: #ff8a3d; }
html, body { margin: 0; height: 100%; position: relative; background: var(--bg); color: var(--ink); font-family: 'Barlow', system-ui, sans-serif; overflow: hidden; }
#globe { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, #10233a 0%, #070d16 62%); }
#globe canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y;   /* на телефона страницата се превърта нагоре-надолу, планетата се върти встрани */ }
#globe canvas:active { cursor: grabbing; }
.head { position: absolute; left: 0; right: 0; top: 18px; text-align: center; pointer-events: none; padding: 0 16px; }
.head h1 { margin: 0; font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-weight: 700; font-size: clamp(22px, 3.4vw, 36px); letter-spacing: 0.04em; text-transform: uppercase; }
.head h1 em { color: var(--acc); font-style: normal; }
.head p { margin: 4px 0 0; color: var(--mute); font-size: clamp(13px, 1.5vw, 16px); }
.hint { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; color: var(--mute); font-size: 12.5px; pointer-events: none; opacity: 0.8; padding: 0 16px; }
#tip { position: absolute; transform: translate(-50%, calc(-100% - 16px)); background: rgba(10, 18, 30, 0.92); border: 1px solid rgba(255, 138, 61, 0.55); border-radius: 8px; padding: 7px 11px; font-size: 13.5px; line-height: 1.35; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); }
#tip b { display: block; font-weight: 600; }
#tip span { display: block; color: var(--acc); font-size: 12.5px; }
/* отстрани: държавите със знамената и броя печки (само на широк екран) */
.side { position: absolute; top: 18px; bottom: 18px; width: auto; overflow: hidden; display: none; flex-direction: column; }   /* от горе до долу, редовете се свиват — без скролер */
.side.l { left: 24px; }
.side.r { right: 24px; }
@media (min-width: 1060px) { .side { display: flex; } #count { display: none; } }   /* с колоните обобщението е в реда Total */
.side h2 { flex: 0 0 auto; margin: 0 0 4px; font: 600 11.5px/1 'Barlow', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.side button { flex: 1 1 0; min-height: 0; max-height: 36px; display: grid; grid-template-columns: 24px var(--nw, max-content) 40px 56px; align-items: center; gap: 9px; width: 100%; padding: 0 8px; margin: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: 400 14px/1.2 'Barlow', sans-serif; text-align: left; cursor: pointer; }
.side button:hover, .side button.on { background: rgba(255, 138, 61, 0.12); }
.side img { width: 24px; height: 16px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.side b { text-align: right; font-weight: 600; color: var(--acc); font-variant-numeric: tabular-nums; }
.side i { font-style: normal; font-size: 12.5px; color: var(--mute); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.side span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side .note { flex: 0 0 auto; margin: 6px 8px 0; font-size: 12px; color: var(--mute); }
.side .hdr { flex: 0 0 auto; display: grid; grid-template-columns: 24px var(--nw, max-content) 40px 56px; gap: 9px; padding: 0 8px 6px; font: 600 10.5px/1 'Barlow', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.side .hdr b, .side .hdr i { color: var(--mute); font-size: 10.5px; font-weight: 600; text-align: right; }
.side .tot { flex: 0 0 auto; display: grid; grid-template-columns: 24px var(--nw, max-content) 40px 56px; align-items: center; gap: 9px; margin-top: 4px; padding: 7px 8px 0; border-top: 1px solid rgba(255, 255, 255, 0.18); font: 600 14px/1.2 'Barlow', sans-serif; color: var(--ink); }
.side .tot b { text-align: right; color: var(--acc); font-variant-numeric: tabular-nums; }
.side .tot i { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--ink); text-align: right; white-space: nowrap; }
.side .tot span { grid-column: span 2; }   /* „Total · 31 countries“ заема и мястото на знамето */
#globe canvas.view { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#globe canvas:not(.view) { position: absolute; inset: 0; }