/* «المدينة» (js/hub/city.js): the day picture in layers, moved by the finger; the card of a building. */
.cityView { background: #9DC3E6; touch-action: none; cursor: grab; }
.cworld { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.cground, .cb { position: absolute; left: 0; top: 0; display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.cground { width: 100%; height: 100%; }
.cb { transform-origin: 50% 90%; background-repeat: no-repeat; }

/* the student's name and stone number engraved on the big rock, and the lantern resting on it */
.cname { position: absolute; left: 205px; top: 1328px; transform: translate(-50%, -50%) rotate(-5deg); pointer-events: none; text-align: center; }
.cname span { display: grid; justify-items: center; line-height: 1; font-family: var(--f-hand); color: rgba(74, 56, 36, .78);
  text-shadow: 0 1.5px 0 rgba(255, 246, 225, .55), 0 -1px 0 rgba(40, 28, 14, .35); }
.cname b { font-family: var(--f-title); font-weight: 800; font-size: 44px; }
.cname em { font-style: normal; font-size: 38px; margin-top: 6px; white-space: nowrap; }
.clamp { position: absolute; left: 300px; top: 1262px; width: 46px; height: 94px; transform: translate(-50%, -100%); pointer-events: none; }
.clamp img { position: relative; width: 100%; height: 100%; display: block; }
.clamp i { position: absolute; left: 20px; top: 61px; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 226, 150, .95) 0, rgba(255, 180, 80, .45) 20%, rgba(255, 160, 60, .12) 45%, transparent 68%); animation: flicker 2.4s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { transform: scale(1); opacity: .85; } 30% { transform: scale(1.08); opacity: 1; } 55% { transform: scale(.94); opacity: .8; } 80% { transform: scale(1.04); opacity: .95; } }

/* a few birds across the sky */
.cbirds { position: absolute; inset: 0 0 auto 0; height: 260px; pointer-events: none; overflow: hidden; }
.cbirds b { position: absolute; left: -40px; width: 22px; height: 9px; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 9'%3E%3Cpath d='M1 7 Q6 1 11 6 Q16 1 21 7' fill='none' stroke='%23293a52' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: bird 46s linear infinite, flap .5s ease-in-out infinite alternate; }
.cbirds b:nth-child(1) { top: 70px; animation-delay: -4s, 0s; }
.cbirds b:nth-child(2) { top: 92px; animation-delay: -6s, -.2s; transform: scale(.8); }
.cbirds b:nth-child(3) { top: 150px; animation-duration: 58s, .45s; animation-delay: -30s, -.1s; }
.cbirds b:nth-child(4) { top: 168px; animation-duration: 58s, .55s; animation-delay: -32s, -.3s; }
.cbirds b:nth-child(5) { top: 210px; animation-duration: 64s, .5s; animation-delay: -50s, 0s; }
@keyframes bird { from { translate: 0 0; } 50% { translate: 560px -18px; } to { translate: 1110px 6px; } }
@keyframes flap { from { scale: 1 1; } to { scale: 1 .45; } }

/* «هنا بيتك»: rings on the home the first time */
.cring { position: absolute; width: 0; height: 0; pointer-events: none; }
.cring i { position: absolute; left: -55px; top: -55px; width: 110px; height: 110px; border-radius: 50%; border: 5px solid #FFE3A1; box-shadow: 0 0 18px rgba(255, 200, 100, .7); animation: cring 1.8s ease-out infinite; }
.cring i + i { animation-delay: .9s; }
.cring span { position: absolute; left: 0; top: -96px; transform: translateX(-50%); white-space: nowrap; padding: 10px 22px; border-radius: 30px; font-family: var(--f-title); font-weight: 800; font-size: 30px;
  background: rgba(9, 14, 28, .86); color: #FFE3A1; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); animation: bob 1.6s ease-in-out infinite; }
@keyframes cring { 0% { transform: scale(.45); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes bob { 50% { translate: 0 -6px; } }

.cdust { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(236, 222, 196, .9), rgba(210, 190, 160, 0) 70%); }

/* the card of a building, above the bottom bar */
.csheet { position: absolute; z-index: 3; left: 4cqw; right: 4cqw; bottom: calc(var(--nav-h) + 3cqw); padding: 5cqw 5.5cqw 5cqw; border-radius: 5.5cqw;
  background: var(--day-card); color: var(--day-ink); box-shadow: 0 3cqw 9cqw rgba(9, 14, 28, .35); display: grid; gap: 2.4cqw; cursor: default; touch-action: manipulation; }
.csheet h3 { margin: 0; padding-inline-end: 12cqw; font-family: var(--f-title); font-weight: 800; font-size: 7cqw; line-height: 1.15; }
.csheet .cx { position: absolute; top: 3.5cqw; left: 3.5cqw; width: 11cqw; height: 11cqw; border: 0; border-radius: 50%; background: rgba(29, 42, 68, .07); color: var(--day-mute); display: grid; place-items: center; cursor: pointer; }
.csheet .cx svg { width: 5cqw; height: 5cqw; }
.cchip { justify-self: start; padding: 1cqw 3cqw; border-radius: 4cqw; font-size: 3.6cqw; font-weight: 800; }
.cchip.ok { background: rgba(62, 142, 90, .14); color: var(--day-green); }
.cchip.up { background: rgba(201, 138, 27, .15); color: #9A6610; }
.cchip.wait { background: rgba(29, 42, 68, .08); color: var(--day-mute); }
.cabout { margin: 0; font-size: 4.6cqw; line-height: 1.6; color: var(--day-ink); }
.cabout small { display: block; margin-top: 1cqw; font-size: 3.8cqw; color: var(--day-mute); }
.cabout .dropIcon, .cbtn .dropIcon { width: 5.6cqw; height: 5.6cqw; margin: -1cqw 0; }
.cbar { height: 2.6cqw; border-radius: 2cqw; background: rgba(29, 42, 68, .1); overflow: hidden; }
.cbar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #E9A12B, #FFD66B); }
.cnum { margin: 0; font-size: 3.8cqw; color: var(--day-mute); }
.cnum b { color: var(--day-ink); font-family: var(--f-title); }
.crow { display: flex; gap: 3cqw; }
.cbtn { flex: 1; min-height: 13cqw; border: 0; border-radius: 4cqw; background: var(--day-ink); color: #FFF6E0; font: inherit; font-size: 4.6cqw; font-weight: 800; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 1.6cqw; transition: transform .12s; }
.cbtn.gift { background: linear-gradient(180deg, #F2B544, #D99422); color: #2A1A05; }
.cbtn:active { transform: scale(.96); }
.cbtn[disabled] { opacity: .45; }

/* «صعود الجبل»: on the stone road out of the city (owner, 30-10); it opens the map */
.cmount { position: absolute; left: 560px; top: 1378px; width: 0; height: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.cmount i { position: absolute; left: -46px; top: -46px; width: 92px; height: 92px; border-radius: 50%; border: 4px solid rgba(255, 227, 161, .85);
  box-shadow: 0 0 16px rgba(255, 200, 100, .6); animation: cring 2.4s ease-out infinite; pointer-events: none; }
.cmount span { position: absolute; left: 0; top: -40px; transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 12px 24px; border-radius: 34px; background: rgba(9, 14, 28, .86); color: #FFE3A1; font-family: var(--f-title); font-weight: 800; font-size: 32px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.cmount span svg { width: 38px; height: 38px; }
.cmount::before { content: ''; position: absolute; left: -70px; top: -150px; width: 140px; height: 200px; } /* a generous touch area */

/* the clock of a building being built */
.cclock { position: absolute; transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 26px; pointer-events: none;
  background: rgba(9, 14, 28, .82); color: #FFE3A1; font-family: var(--f-title); font-weight: 800; font-size: 28px; direction: ltr; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.cclock svg { width: 30px; height: 30px; animation: knock .55s ease-in-out infinite alternate; transform-origin: 30% 70%; }
@keyframes knock { to { transform: rotate(-22deg); } }

/* the time of day: birds by day only; the lantern glows more in the dark */
.cityView[data-time="night"] .cbirds { display: none; }
.cityView[data-time="night"] { background: #0B1426; }
.cityView[data-time="night"] .clamp i { width: 190px; height: 190px; margin: -95px 0 0 -95px; }
.cityView[data-time="dusk"] .cbirds b { opacity: .35; }