/* Cosmic phone: a living night sky behind the phone launcher. Loaded after scenes.css. */
.phone.cosmic { isolation: isolate; overflow: hidden; color: #fff; border-radius: 48px; padding: 14px 16px 22px;
  background: radial-gradient(120% 80% at 50% 0%, #1d1150 0%, #0a0624 45%, #03020a 100%);
  border: 8px solid #101217; box-shadow: 0 0 0 1px #5a6070, 0 0 0 3px #1b1e25, 0 40px 90px #000c, 0 0 70px #6c4cff40; }
.phone.cosmic .cosmos { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cosmos i { position: absolute; display: block; }
.nebula { border-radius: 50%; filter: blur(38px); opacity: .75; mix-blend-mode: screen; animation: cosmos-drift 26s ease-in-out infinite alternate; }
.n1 { width: 320px; height: 260px; left: -90px; top: 60px; background: radial-gradient(circle, #ff3dcf 0%, #7a2cff 45%, transparent 70%); }
.n2 { width: 320px; height: 320px; right: -130px; top: 340px; background: radial-gradient(circle, #00e0ff 0%, #2350ff 45%, transparent 70%); animation-duration: 32s; }
.n3 { width: 300px; height: 240px; left: 10px; bottom: -70px; background: radial-gradient(circle, #ffb347 0%, #ff3d6e 45%, transparent 70%); animation-duration: 38s; opacity: .55; }
.stars { inset: 0; background-repeat: repeat; animation: cosmos-twinkle 4s ease-in-out infinite alternate; }
.s1 { background-image: radial-gradient(1px 1px at 20px 30px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 90px 120px, #cfe 50%, transparent 51%), radial-gradient(1.5px 1.5px at 150px 60px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 210px 190px, #fdf 50%, transparent 51%); background-size: 240px 220px; }
.s2 { background-image: radial-gradient(1px 1px at 60px 80px, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 170px 20px, #bdf 50%, transparent 51%), radial-gradient(1px 1px at 120px 160px, #fff 50%, transparent 51%); background-size: 200px 180px; animation-delay: 1.3s; opacity: .7; }
.s3 { background-image: radial-gradient(2px 2px at 40px 140px, #fff 50%, transparent 51%), radial-gradient(2px 2px at 250px 260px, #fffbe0 50%, transparent 51%); background-size: 310px 330px; animation-delay: 2.1s; }
.planet { width: 120px; height: 120px; right: -36px; top: 112px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #ffd59a, #ff7a59 35%, #6b1f6e 75%, #22072e); box-shadow: 0 0 40px #ff7a5966, inset -16px -14px 30px #0009; }
.planet .ring { left: -38px; top: 50px; width: 196px; height: 26px; border-radius: 50%; border: 3px solid #ffe2b366; transform: rotate(-18deg); box-shadow: 0 0 12px #ffd59a55; }
.comet { width: 120px; height: 2px; left: -140px; top: 40px; background: linear-gradient(90deg, transparent, #fff); border-radius: 2px; transform: rotate(18deg); animation: cosmos-comet 9s linear infinite; opacity: 0; }
@keyframes cosmos-drift { to { transform: translate(40px, -30px) scale(1.15); } }
@keyframes cosmos-twinkle { from { opacity: .35; } to { opacity: 1; } }
@keyframes cosmos-comet { 0%, 70% { opacity: 0; transform: translate(0, 0) rotate(18deg); } 72% { opacity: 1; } 100% { opacity: 0; transform: translate(560px, 180px) rotate(18deg); } }
.phone.cosmic .island { width: 110px; height: 30px; margin: -2px auto 0; border-radius: 20px; background: #000; box-shadow: 0 0 0 1px #ffffff12; display: grid; place-items: center end; padding-right: 12px; }
.phone.cosmic .island i { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3a4cff, #050510 70%); }
.phone.cosmic .phone-status { margin-top: -30px; padding: 0 4px; }
.phone.cosmic .phone-status > span:nth-child(2) { opacity: 0; }
.phone.cosmic .phone-close { background: #ffffff1a; backdrop-filter: blur(8px); }
.phone.cosmic .phone-clock { display: grid; justify-items: start; padding: 18px 6px 12px; }
.phone.cosmic .phone-clock em { font-style: normal; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: #c9b8ff; }
.phone.cosmic .phone-clock strong { font-size: 4.4rem; line-height: .95; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff 30%, #b9a6ff 75%, #ff8fd8); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px #8c6bff66); }
.phone.cosmic .phone-clock small { color: #e6defc; }
.phone-widgets { display: grid; grid-template-columns: 1.15fr .85fr 1.15fr; gap: 8px; margin-bottom: 12px; }
.widget { display: grid; align-content: start; gap: 2px; min-width: 0; text-align: left; padding: 10px 11px; border-radius: 20px; color: #fff; font: inherit; cursor: pointer; text-decoration: none; background: linear-gradient(160deg, #ffffff22, #ffffff08); border: 1px solid #ffffff2e; backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 1px 0 #ffffff30, 0 8px 24px #0006; }
.widget small { font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; color: #cfc4ff; }
.widget strong { font-size: .92rem; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget span { font-size: .68rem; color: #d9d2f5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.energy-widget { justify-items: center; text-align: center; }
.ring-wrap { position: relative; display: grid; place-items: center; }
.ring-gauge { --p: 50; width: 54px; height: 54px; border-radius: 50%; background: conic-gradient(#7dffcf calc(var(--p) * 1%), #ffffff1f 0); -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%); mask: radial-gradient(circle, transparent 54%, #000 56%); }
.ring-wrap b { position: absolute; font-size: .95rem; font-variant-numeric: tabular-nums; }
.phone.cosmic .phone-search { background: linear-gradient(160deg, #ffffff22, #ffffff0a); border-color: #ffffff30; backdrop-filter: blur(14px); }
.phone.cosmic .phone-search input::placeholder { color: #d9d2f5; }
.phone.cosmic .phone-categories button { background: #ffffff12; border-color: #ffffff26; color: #ece6ff; backdrop-filter: blur(10px); }
.phone.cosmic .phone-categories button[aria-pressed=true] { background: linear-gradient(135deg, #b9a6ff, #ff8fd8); color: #1a0f3a; border-color: transparent; box-shadow: 0 0 16px #b9a6ff66; }
.phone.cosmic .phone-results { color: #cfc4ff; }
.phone.cosmic .phone-app { color: #fff; text-decoration: none; }
.phone.cosmic .phone-icon { position: relative; overflow: hidden; max-width: 60px; border-radius: 18px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 70%, #fff) 0%, var(--c) 45%, color-mix(in srgb, var(--c) 55%, #000) 100%) !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--c) 45%, transparent), 0 0 22px color-mix(in srgb, var(--c) 30%, transparent), inset 0 1px 0 #ffffff66, inset 0 -6px 12px #0003; transition: transform .15s, box-shadow .2s; }
.phone.cosmic .phone-icon::after { content: ""; position: absolute; inset: 0 0 55% 0; background: linear-gradient(180deg, #ffffff55, transparent); border-radius: 18px 18px 50% 50% / 18px 18px 30% 30%; }
.phone.cosmic .phone-icon b { font-size: 1.6rem; font-weight: 400; filter: drop-shadow(0 2px 3px #0005); }
.phone.cosmic .phone-app span:last-child { text-shadow: 0 1px 4px #000c; }
.phone.cosmic .phone-app:hover .phone-icon { transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 22px color-mix(in srgb, var(--c) 55%, transparent), 0 0 32px color-mix(in srgb, var(--c) 45%, transparent), inset 0 1px 0 #ffffff66; }
.phone.cosmic .phone-app:active .phone-icon { transform: scale(.93); }
.phone.cosmic .phone-no-results { color: #ece6ff; }
.phone.cosmic .phone-home-indicator { background: #ffffffd0; width: 130px; }
@media (prefers-reduced-motion: reduce) { .nebula, .stars, .comet { animation: none; } .comet { display: none; } }

/* "At work": what the player is doing right now, pinned to the top of every screen. */
.busy-panel { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; background: radial-gradient(140% 120% at 0% 0%, #2a1d63 0%, #141a22 60%); border: 1px solid #b9a6ff66; box-shadow: 0 10px 30px #0008, 0 0 24px #7b5cff33; }
.busy-panel .busy-info { min-width: 0; }
.busy-panel .busy-info h3 { margin: 2px 0 0; font-size: 1.05rem; line-height: 1.2; overflow-wrap: anywhere; }
.busy-panel .busy-info p { margin: 2px 0 0; font-size: .8rem; color: #c9c3e6; overflow-wrap: anywhere; }
.work-scene { position: relative; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(150deg, #7b5cff, #3a2a99); box-shadow: 0 0 18px #7b5cff88, inset 0 1px 0 #ffffff55; }
.work-icon { font-size: 1.9rem; animation: work-bob 1.2s ease-in-out infinite; }
.work-spark { position: absolute; font-style: normal; font-size: .7rem; color: #d5ff79; opacity: 0; animation: work-spark 1.8s ease-out infinite; }
.work-spark.w1 { top: 4px; right: 6px; } .work-spark.w2 { bottom: 6px; left: 4px; animation-delay: .6s; } .work-spark.w3 { top: 10px; left: 8px; animation-delay: 1.2s; }
.busy-ring { --p: 0; position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: conic-gradient(#d5ff79 calc(var(--p) * 1%), #ffffff1c 0); }
.busy-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #161b24; }
.busy-ring strong, .busy-ring small { position: relative; line-height: 1.05; }
.busy-ring strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.busy-ring small { font-size: .6rem; color: #b8b2d6; text-transform: uppercase; letter-spacing: .1em; }
.busy-panel .busy-bar { grid-column: 1 / -1; height: 8px; border-radius: 8px; background: #ffffff14; overflow: hidden; margin: 0; }
.busy-panel .busy-bar i { display: block; height: 100%; border-radius: 8px; background: repeating-linear-gradient(45deg, #d5ff79 0 10px, #9ee05a 10px 20px); background-size: 28px 28px; animation: work-stripes 1s linear infinite; transition: width 1s linear; }
.busy-panel .busy-meta { grid-column: 1 / 3; margin: 0; font-size: .85rem; }
.busy-panel .busy-meta strong { font-size: .9rem; color: #f1d58f; font-variant-numeric: normal; }
.busy-panel .btn { grid-column: 3; grid-row: auto; justify-self: end; min-height: 38px; padding: 6px 12px; }
@keyframes work-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-4px) rotate(4deg); } }
@keyframes work-spark { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4) translateY(-6px); } }
@keyframes work-stripes { to { background-position: 28px 0; } }
@media (prefers-reduced-motion: reduce) { .work-icon, .work-spark, .busy-panel .busy-bar i { animation: none; } }

/* Two jobs: a taxed job and a cash-in-hand job side by side. */
.job-note { margin: 0 0 10px; }
.job-slots { gap: 14px; margin-bottom: 18px; align-items: stretch; }
.job-slots .job-current { margin: 0; }
.job-current.cash { border-color: #d8b66d66; background: radial-gradient(140% 120% at 0% 0%, #3a2f17 0%, #171d24 60%); }
.job-current.empty { opacity: .9; border-style: dashed; }
.job-current.empty p { margin: 6px 0 0; color: #a9adb3; }