/* ATOM Christmas Village 3D prototype: only what differs from ../village/village.css */

/* the 3D canvas clears to the night colour itself; this shows before the first frame */
#world { background: #0b1033; }

/* message when 3D (WebGL) is not available */
.nogl { background: radial-gradient(ellipse at 50% 40%, #1a2470, #05071c 78%); }
.nogl-text { margin: 14px 0 0; text-wrap: pretty; font-size: 16px; font-weight: 600; line-height: 1.8; }
.nogl-en { margin: 0 0 12px; font-family: var(--f-num); font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .7); }
.nogl .btn { display: inline-block; text-decoration: none; min-width: 200px; }

/* the start button waits (dimmed) until the village is built; three soft dots show in the empty cat row meanwhile */
.btn:disabled { opacity: .5; cursor: default; box-shadow: none; }
.cats:empty { min-height: 84px; grid-template-columns: 1fr; place-items: center; }
.cats:empty::before { content: '\2022 \a0 \2022 \a0 \2022'; font-size: 28px; letter-spacing: 4px; color: var(--lime); animation: wait 1s ease-in-out infinite alternate; }
@keyframes wait { from { opacity: .25; } to { opacity: 1; } }

/* toast: just under the goal line (in 3D the middle of the screen is the tree), and it wraps on narrow phones */
.toast { top: calc(150px + var(--safe-t)); width: max-content; max-width: calc(100% - 24px); white-space: normal; text-align: center; text-wrap: balance; line-height: 1.7; }

/* end heading on one line down to 320 px wide */
.end-h { font-size: min(21px, 5.4vw); }

/* a little less see-through, so bright sign texts behind the panel do not mix with its words */
.panel { background: rgba(16, 26, 110, .92); }