/* Nous City social views and ceremonies (city/city-social.js). Tokens from city.css. */
body.csoc-lock { overflow: hidden; }
.csoc-overlay { position: fixed; inset: 0; z-index: 9000; overflow: hidden; font-weight: 300; color: #363f51; user-select: none; -webkit-user-select: none;
    background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #d6ecff 55%, #bcdcf7 100%); animation: csocIn .25s ease-out; }
@keyframes csocIn { from { opacity: 0; } }
.csoc-stage { position: absolute; inset: 0; }
.csoc-stage canvas { display: block; width: 100% !important; height: 100% !important; cursor: grab; }
.csoc-stage canvas:active { cursor: grabbing; }
.csoc-stage__fail { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; color: #6b7a99; }

.csoc-card { position: absolute; left: 50%; transform: translateX(-50%); width: min(440px, calc(100% - 24px)); padding: 16px 18px; border-radius: 18px;
    background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 24px rgba(54, 63, 81, .14); }
.csoc-kicker { margin: 0 0 2px; font-size: 12px; color: #6b7a99; letter-spacing: .04em; }
.csoc-kicker--gold { color: #b45309; letter-spacing: .2em; text-transform: uppercase; }
.csoc-title { margin: 0 0 8px; font-size: 22px; font-weight: 300; color: #363f51; }
.csoc-title--big { font-size: 30px; }
.csoc-btn { height: 40px; padding: 0 16px; border: 0; border-radius: 12px; font: inherit; font-size: 14px; font-weight: 400; cursor: pointer; white-space: nowrap; }
.csoc-btn--dark { background: #363f51; color: #fff; }
.csoc-btn--gold { background: linear-gradient(180deg, #fbbf24, #f59e0b); color: #fff; box-shadow: 0 3px 12px rgba(245, 158, 11, .4); }
.csoc-btn:focus-visible, .csoc-round:focus-visible { outline: 2px solid #f59e0b; outline-offset: 2px; }

/* A friend's city */
.csoc-friend__card { top: max(12px, env(safe-area-inset-top)); display: flex; align-items: center; gap: 12px; }
.csoc-friend__info { flex: 1; min-width: 0; }
.csoc-friend__info .csoc-title { font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csoc-friend__info .csoc-title--wrap { white-space: normal; }
.csoc-ctrls { position: absolute; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 8px; }
.csoc-round { width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: #4a5568;
    font: inherit; font-size: 20px; box-shadow: 0 2px 10px rgba(54, 63, 81, .12); cursor: pointer; }
.csoc-private { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.csoc-private__cloud { width: 220px; height: 80px; border-radius: 80px; background: #fff; opacity: .9; box-shadow: 60px -30px 0 10px #fff, -50px -18px 0 0 #fff; animation: csocDrift 6s ease-in-out infinite alternate; }
@keyframes csocDrift { to { transform: translateX(24px); } }

/* Founding: clouds part, the island rises from mist, the town hall goes up */
.csoc-found__world { position: absolute; inset: 0; transform: translateY(-18%) scale(2.6); filter: blur(6px); opacity: 0;
    transition: transform 1.9s cubic-bezier(.2, .7, .2, 1), filter 1.2s ease, opacity .9s ease; }
.csoc-found.is-sky .csoc-found__world { opacity: .35; }
.csoc-found.has-risen .csoc-found__world { transform: none; filter: none; opacity: 1; }
.csoc-found.has-risen .csoc-stage { animation: csocRise 1.1s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes csocRise { from { transform: translateY(60px); } }
.csoc-clouds { position: absolute; inset: 0; pointer-events: none; }
.csoc-clouds i { position: absolute; width: 70vw; height: 40vh; border-radius: 50%; background: radial-gradient(closest-side, #fff 40%, rgba(255, 255, 255, 0));
    transition: transform 1.6s cubic-bezier(.5, 0, .2, 1), opacity 1.6s ease; }
.csoc-clouds i:nth-child(1) { left: -20vw; top: -6vh; } .csoc-clouds i:nth-child(2) { right: -20vw; top: 4vh; }
.csoc-clouds i:nth-child(3) { left: 10vw; top: 30vh; } .csoc-clouds i:nth-child(4) { right: 0; top: 46vh; }
.csoc-clouds i:nth-child(5) { left: -26vw; bottom: -8vh; } .csoc-clouds i:nth-child(6) { right: -24vw; bottom: -4vh; }
.csoc-found.has-risen .csoc-clouds i { opacity: 0; }
.csoc-found.has-risen .csoc-clouds i:nth-child(odd) { transform: translateX(-60vw) scale(1.4); }
.csoc-found.has-risen .csoc-clouds i:nth-child(even) { transform: translateX(60vw) scale(1.4); }
.csoc-mist { position: absolute; left: 0; right: 0; bottom: 0; height: 55%; pointer-events: none; opacity: 0;
    background: linear-gradient(to top, rgba(255, 255, 255, .95), rgba(255, 255, 255, .6) 45%, rgba(255, 255, 255, 0)); transition: opacity 1.4s ease .3s; }
.csoc-found.has-risen .csoc-mist { opacity: 1; }
.csoc-found.has-built .csoc-mist { opacity: 0; }
.csoc-dust { position: absolute; left: 50%; top: 54%; width: 0; height: 0; pointer-events: none; }
.csoc-dust i { position: absolute; width: 46px; height: 46px; margin: -23px; border-radius: 50%; background: radial-gradient(closest-side, rgba(214, 196, 168, .9), rgba(214, 196, 168, 0)); opacity: 0; }
.csoc-found.is-build .csoc-dust i { animation: csocDust 1s ease-out both; }
.csoc-dust i:nth-child(1) { --x: -70px; --y: -10px; } .csoc-dust i:nth-child(2) { --x: 70px; --y: -14px; animation-delay: .05s; }
.csoc-dust i:nth-child(3) { --x: -40px; --y: 26px; animation-delay: .1s; } .csoc-dust i:nth-child(4) { --x: 44px; --y: 30px; animation-delay: .08s; }
.csoc-dust i:nth-child(5) { --x: 0; --y: -50px; animation-delay: .12s; } .csoc-dust i:nth-child(6) { --x: 0; --y: 40px; animation-delay: .03s; }
@keyframes csocDust { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(2.2); } }
.csoc-caption { position: absolute; left: 0; right: 0; top: 16%; margin: 0; text-align: center; font-size: 22px; color: #363f51; text-shadow: 0 1px 12px #fff;
    animation: csocCap .6s ease-out both; pointer-events: none; }
@keyframes csocCap { from { opacity: 0; transform: translateY(8px); } }
.csoc-skip { position: absolute; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom)); margin: 0; text-align: center; font-size: 12px; color: #6b7a99; pointer-events: none; }
.csoc-mayor { bottom: max(24px, env(safe-area-inset-bottom)); text-align: center; animation: csocUp .45s cubic-bezier(.2, .8, .3, 1.2) both; }
@keyframes csocUp { from { opacity: 0; transform: translate(-50%, 30px); } }
.csoc-input { display: block; width: 100%; box-sizing: border-box; height: 44px; margin: 4px 0 12px; padding: 0 14px; border: 0; border-radius: 12px; background: #f1f4f8;
    font: inherit; font-size: 17px; font-weight: 400; color: #363f51; text-align: center; box-shadow: inset 0 0 0 1px #e4e8ee; user-select: text; -webkit-user-select: text; }
.csoc-input:focus { outline: none; box-shadow: inset 0 0 0 2px #f59e0b; }
.csoc-mayor .csoc-btn { width: 100%; }

.csoc-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.csoc-confetti i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; animation: csocFall 2s cubic-bezier(.3, .6, .5, 1) both; }
@keyframes csocFall { to { transform: translate(var(--dx), 105vh) rotate(var(--rot)); opacity: .6; } }

/* Unlock: a golden portal, light rays and the world spinning in */
.csoc-unlock { background: radial-gradient(90% 70% at 50% 45%, #3b2f1c 0%, #1b1a24 70%); }
.csoc-unlock.is-fade { animation: csocDark .35s ease-out both; }
@keyframes csocDark { from { background-color: rgba(0, 0, 0, 0); opacity: 0; } }
.csoc-rays { position: absolute; left: 50%; top: 45%; width: 180vmax; height: 180vmax; margin: -90vmax 0 0 -90vmax; opacity: 0; pointer-events: none;
    background: repeating-conic-gradient(from 0deg, rgba(253, 230, 138, .22) 0 6deg, rgba(253, 230, 138, 0) 6deg 18deg);
    -webkit-mask: radial-gradient(closest-side, #000 10%, transparent 75%); mask: radial-gradient(closest-side, #000 10%, transparent 75%);
    transition: opacity .8s ease; animation: csocSpin 14s linear infinite; }
.csoc-unlock.has-portal .csoc-rays { opacity: 1; }
@keyframes csocSpin { to { transform: rotate(360deg); } }
.csoc-portal { position: absolute; left: 50%; top: 45%; width: min(78vmin, 560px); height: min(78vmin, 560px); transform: translate(-50%, -50%) scale(0); border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, #fff7d6 0%, #fde68a 45%, rgba(251, 191, 36, .55) 70%, rgba(245, 158, 11, 0) 100%);
    box-shadow: 0 0 80px 30px rgba(251, 191, 36, .45), inset 0 0 40px rgba(255, 255, 255, .8); transition: transform .7s cubic-bezier(.2, .9, .3, 1.3); }
.csoc-unlock.has-portal .csoc-portal { transform: translate(-50%, -50%) scale(1); }
.csoc-unlock__world { position: absolute; left: 50%; top: 45%; width: min(78vmin, 560px); height: min(78vmin, 560px); transform: translate(-50%, -50%) scale(.1) rotate(-200deg); opacity: 0;
    border-radius: 50%; overflow: hidden; transition: transform 1.3s cubic-bezier(.2, .8, .25, 1), opacity .5s ease; }
.csoc-unlock.has-world .csoc-unlock__world { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
.csoc-banner { position: absolute; left: 50%; bottom: max(28px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(460px, calc(100% - 24px)); padding: 18px 20px; box-sizing: border-box;
    border-radius: 18px; text-align: center; background: rgba(255, 255, 255, .95); box-shadow: 0 10px 40px rgba(0, 0, 0, .3), 0 0 0 1px rgba(251, 191, 36, .5); animation: csocUp .45s cubic-bezier(.2, .8, .3, 1.2) both; }
.csoc-banner__sub { margin: -2px 0 14px; font-size: 14px; color: #6b7a99; }
.csoc-banner .csoc-btn { min-width: 160px; }

@media (prefers-reduced-motion: reduce) {
    .csoc-overlay, .csoc-found__world, .csoc-stage, .csoc-clouds i, .csoc-mist, .csoc-dust i, .csoc-caption, .csoc-mayor, .csoc-confetti, .csoc-rays,
    .csoc-portal, .csoc-unlock__world, .csoc-banner, .csoc-private__cloud { animation: none !important; transition: none !important; }
    .csoc-confetti { display: none; }
}

/* "visit city" in the friends list (index.js) */
.csoc-visit { padding: 6px 12px; border: 0; border-radius: 8px; background: #fef3c7; color: #92400e; font: inherit; font-size: 12px; font-weight: 400; cursor: pointer; transition: background .15s; }
.csoc-visit:hover { background: #fde68a; }