/* In-game UI: HUD, phone, messages, speech, ring menu, action banner and stat summary. */

/* ---------- HUD ---------- */
.hud { position: fixed; inset: 0; }
.hud-top {
  position: absolute;
  top: calc(var(--sp-3) + var(--safe-top));
  left: calc(var(--sp-3) + var(--safe-left));
  right: calc(var(--sp-3) + var(--safe-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.hud-left { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.pill-time .day { color: var(--purple-300); font-size: var(--fs-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.pill-time .clock, .pill-cash { font-variant-numeric: tabular-nums; }
.pill-cash { color: var(--gold-400); }
.energy {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-sm);
  color: var(--gold-400);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.energy svg.ring { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); transform: rotate(-90deg); }
.energy .track { stroke: rgba(255, 255, 255, 0.14); }
.energy .fill { stroke: currentColor; transition: stroke-dashoffset 600ms var(--ease-out); }
.energy .icon { font-size: 1rem; }
.energy.is-low { color: var(--coral-500); animation: throb 1s ease-in-out infinite; }
@keyframes throb { 50% { transform: scale(1.08); } }
.hud-phone {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: var(--r-md);
  background: var(--accent-grad);
  color: var(--white);
  box-shadow: 0 6px 16px rgba(123, 47, 247, 0.45);
  font-size: 1.3rem;
  transition: transform var(--dur-fast) var(--ease-out);
}
.hud-phone:hover { transform: translateY(-1px) scale(1.05); }
.hud-phone:active { transform: scale(0.94); }
.hud-phone .dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--coral-500);
  box-shadow: 0 0 0 2px var(--white);
  animation: pulse-dot 1s ease-in-out infinite;
}
@keyframes pulse-dot { 50% { transform: scale(1.35); } }
.hud-hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--sp-4) + var(--safe-bottom));
  transform: translate(-50%, 0);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  transition: opacity var(--dur-med), transform var(--dur-med) var(--ease-out);
}
.hud-hint.is-hidden { opacity: 0; transform: translate(-50%, 8px); }
.hud-hint .key {
  display: grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.35rem;
  border-radius: var(--r-xs);
  background: rgba(255, 255, 255, 0.16);
  font-size: var(--fs-2xs);
}
@media (pointer: coarse) { .hud-hint .key { display: none; } }
@media (max-width: 420px) {
  .pill { height: 2.2rem; padding: 0 var(--sp-3); font-size: var(--fs-sm); }
  .pill-time .day { display: none; }
}

/* ---------- Layer for game dialogs ---------- */
.overlay { position: fixed; inset: 0; }
.overlay > .layer { position: absolute; inset: 0; pointer-events: auto; }
.layer-center { display: grid; place-items: center; padding: var(--sp-4); }
.layer-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--sp-4) var(--sp-4) calc(var(--sp-5) + var(--safe-bottom));
}
.continue {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: var(--accent);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  animation: nudge 1s ease-in-out infinite;
}
.continue .icon { font-size: 0.9rem; }
@keyframes nudge { 50% { transform: translateX(3px); } }

/* ---------- Message card ---------- */
.message {
  --tone: var(--accent);
  width: min(100%, 26rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  animation: modal-in var(--dur-slow) var(--ease-spring) both;
}
.message.is-warning { --tone: var(--coral-500); }
.message.is-goal { --tone: var(--teal-500); }
.message-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.8em;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--tone) 14%, white);
  color: var(--tone);
}
.message-text { margin: 0; color: var(--ink-700); font-size: var(--fs-md); font-weight: var(--fw-medium); line-height: var(--lh-body); }
.message .continue { align-self: flex-end; color: var(--tone); }

/* ---------- Speech ---------- */
.speech {
  width: min(100%, 36rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5) var(--sp-4);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: modal-in var(--dur-slow) var(--ease-spring) both;
}
.speech-head { display: flex; align-items: center; gap: var(--sp-3); }
.avatar {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--warm-grad);
  color: var(--white);
  font-weight: var(--fw-black);
  font-size: var(--fs-md);
  flex: none;
}
.speech-who { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.speech-rel { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink-400); }
.speech-rel .bar { width: 5rem; height: 0.35rem; --fill: var(--warm-grad); }
.speech-text { margin: 0; min-height: 3em; color: var(--ink-700); font-size: var(--fs-md); line-height: var(--lh-body); }
.speech .continue { align-self: flex-end; visibility: hidden; }
.speech.is-done .continue { visibility: visible; }

/* ---------- Ring menu ---------- */
.ring-menu { position: absolute; width: 0; height: 0; pointer-events: none; }
.ring-disc {
  position: absolute;
  left: -4.8rem;
  top: -4.8rem;
  width: 9.6rem;
  height: 9.6rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 13, 38, 0.55) 0%, rgba(20, 13, 38, 0.35) 60%, transparent 71%);
  animation: ring-open var(--dur-slow) var(--ease-spring) both;
}
.ring-item {
  position: absolute;
  left: calc(var(--x) - 1.5rem);
  top: calc(var(--y) - 1.5rem);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-700);
  font-size: 1.25rem;
  box-shadow: var(--shadow-md);
  pointer-events: auto;
  animation: ring-open var(--dur-slow) var(--ease-spring) backwards;
  transition: transform var(--dur-med) var(--ease-spring), background-color var(--dur-med), color var(--dur-med);
}
.ring-item.is-active { background: var(--accent-grad); color: var(--white); transform: scale(1.18); box-shadow: var(--shadow-accent); }
.ring-title, .ring-label {
  position: absolute;
  left: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.ring-title { top: -7.4rem; color: var(--white); background: var(--glass); }
.ring-label {
  top: 5.2rem;
  padding: 0.45em 1.1em;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  color: var(--accent-strong);
  font-size: var(--fs-sm);
}
@keyframes ring-open { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
.ring-who {
  position: absolute;
  top: calc(4rem + var(--safe-top));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  animation: modal-in var(--dur-slow) var(--ease-spring) both;
}
.ring-who .avatar { width: 2rem; height: 2rem; font-size: var(--fs-sm); }
.ring-who .bar { width: 4.5rem; height: 0.35rem; --fill: var(--warm-grad); }

/* ---------- Action banner ---------- */
.action-banner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: min(100%, 18rem);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  color: var(--white);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: modal-in var(--dur-slow) var(--ease-spring) both;
}
.action-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); }
.action-clock { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--purple-300); }
.action-banner .bar { background: rgba(255, 255, 255, 0.15); --fill: var(--warm-grad); }
.action-banner .bar > i { transition: none; }

/* ---------- Phone ---------- */
.phone-layer {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--sp-4) var(--sp-4) calc(var(--sp-3) + var(--safe-bottom));
  background: var(--scrim);
  animation: fade-in var(--dur-med) var(--ease-out) both;
}
.phone {
  width: min(100%, 22rem);
  height: min(100%, 40rem);
  padding: 0.55rem;
  border-radius: 2.2rem;
  background: linear-gradient(160deg, #2a2140, #120d20);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  animation: phone-up var(--dur-slow) var(--ease-spring) both;
}
@keyframes phone-up { from { transform: translateY(110%); } to { transform: none; } }
.phone-screen {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) var(--sp-3);
  border-radius: 1.7rem;
  background: var(--paper);
  overflow: hidden;
}
.phone-status { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-size: var(--fs-xs); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.phone-status .notch { width: 4.5rem; height: 1.1rem; border-radius: var(--r-pill); background: #120d20; }
.phone-status .close { justify-self: end; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--lilac-100); font-size: 0.8rem; }
.tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.25rem; padding: 0.25rem; border-radius: var(--r-pill); background: var(--lilac-100); }
.tab {
  height: 2.1rem;
  border-radius: var(--r-pill);
  color: var(--ink-500);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  transition: background-color var(--dur-med), color var(--dur-med), box-shadow var(--dur-med);
}
.tab.is-active { background: var(--accent-grad); color: var(--white); box-shadow: var(--shadow-sm); }
.phone-body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: var(--sp-3); padding: 0 0.1rem; }
.phone-body > * { animation: fade-in var(--dur-med) var(--ease-out) both; }
.phone-hint { text-align: center; }

.profile-head { display: flex; align-items: center; gap: var(--sp-3); }
.profile-head .avatar { width: 3rem; height: 3rem; font-size: var(--fs-lg); background: var(--accent-grad); }
.profile-head .who { display: flex; flex-direction: column; }
.career-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: linear-gradient(145deg, color-mix(in srgb, var(--career) 80%, white), var(--career) 60%, color-mix(in srgb, var(--career) 70%, black));
  color: var(--white);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--career) 45%, transparent);
}
.career-panel .top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.career-panel .t-label { opacity: 0.8; }
.career-panel .icon { font-size: 1.4rem; }
.career-panel .bar { background: rgba(255, 255, 255, 0.28); --fill: var(--white); }
.career-panel .xp { display: flex; justify-content: space-between; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); opacity: 0.9; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.tile { display: flex; flex-direction: column; gap: 0.15rem; padding: var(--sp-3); border-radius: var(--r-md); background: var(--lilac-50); box-shadow: 0 0 0 1px var(--lilac-100) inset; }
.tile .t-label { color: var(--ink-400); font-size: var(--fs-2xs); }
.tile strong { font-size: var(--fs-md); font-weight: var(--fw-black); font-variant-numeric: tabular-nums; }
.tile.money strong { color: var(--stat-money); }
.goal-box { padding: var(--sp-3); border-radius: var(--r-md); background: var(--lilac-50); }
.goal-box .t-label { color: var(--ink-400); font-size: var(--fs-2xs); }
.goal-box p { margin: 0.2rem 0 0; font-weight: var(--fw-semibold); font-size: var(--fs-sm); }

.stat-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.stat-group > .t-label { color: var(--ink-400); font-size: var(--fs-2xs); }
.stat-row { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem var(--sp-2); align-items: center; }
.stat-row .name { font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.05em; }
.stat-row .value { font-size: var(--fs-xs); font-weight: var(--fw-black); color: var(--stat); font-variant-numeric: tabular-nums; }
.stat-row .bar { grid-column: 1 / -1; --fill: var(--stat); background: color-mix(in srgb, var(--stat) 14%, white); }

.person { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 0.15rem var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--lilac-50); }
.person .avatar { grid-row: 1 / 3; width: 2.2rem; height: 2.2rem; font-size: var(--fs-sm); }
.person .name { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.person .rel { font-size: var(--fs-2xs); color: var(--ink-400); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.05em; }
.person .bar { grid-column: 2 / 4; height: 0.35rem; --fill: var(--warm-grad); }
.person .contact { color: var(--teal-500); font-size: 0.9rem; }
.empty { text-align: center; padding: var(--sp-5) var(--sp-3); }

/* ---------- World-anchored UI (thought bubbles, hustle pin) ---------- */
.worldui { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.world-anchor { position: absolute; left: 0; top: 0; will-change: transform; }
.bubble-pos { position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - var(--stack, 0) * 3.4rem)); }
.bubble {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.35rem 0.6rem 0.4rem;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  transform-origin: 50% 100%;
  animation: bubble-life 2s var(--ease-out) forwards;
}
.bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.45rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 0 0 0.25rem 0;
  background: var(--surface);
  transform: translateX(-50%) rotate(45deg);
  z-index: -1;
}
.bubble-emoji { font-size: 1.7rem; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.bubble-tags { display: flex; gap: 0.25rem; }
.bubble-tag {
  padding: 0.1em 0.5em;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--green-500) 14%, white);
  color: var(--green-500);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.bubble-tag.is-down { background: color-mix(in srgb, var(--coral-500) 14%, white); color: var(--coral-500); }
@keyframes bubble-life {
  0% { opacity: 0; transform: translateY(6px) scale(0.3); }
  14% { opacity: 1; transform: translateY(0) scale(1.1); }
  24% { transform: translateY(-2px) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-28px) scale(1); }
}

.pin {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem 0.2rem 0.2rem;
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  color: var(--white);
  box-shadow: var(--shadow-md);
  transform: translate(-50%, calc(-100% - 0.9rem));
  animation: pin-bob 1.4s ease-in-out infinite;
  white-space: nowrap;
}
.pin-dot {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--warm-grad);
  font-weight: var(--fw-black);
  font-size: var(--fs-sm);
}
.pin-label { font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.pin-arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  margin: -0.35rem 0 0 -0.2rem;
  border-left: 0.6rem solid var(--gold-400);
  border-top: 0.35rem solid transparent;
  border-bottom: 0.35rem solid transparent;
  transform-origin: 0.2rem 0.35rem;
  translate: 0 0;
}
.world-anchor:not(.is-edge) .pin-arrow { top: calc(100% + 0.25rem); }
.world-anchor.is-edge .pin { transform: translate(-50%, -50%); animation: none; }
.world-anchor.is-edge .pin-arrow { margin-left: -0.2rem; }
@keyframes pin-bob { 50% { translate: 0 -4px; } }

/* ---------- Active hustle tracker (below the phone button) ---------- */
.hustle {
  position: absolute;
  top: calc(var(--sp-3) + var(--safe-top) + 3.4rem);
  right: calc(var(--sp-3) + var(--safe-right));
  width: min(17rem, calc(100vw - 2rem));
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: rgba(20, 13, 38, 0.62);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-sm);
  color: var(--white);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  opacity: 0;
  transform: translateX(calc(100% + 2rem));
  transition: transform var(--dur-slow) var(--ease-spring), opacity var(--dur-med) var(--ease-out);
}
.hustle.is-shown { opacity: 1; transform: none; }
.hustle-label { display: flex; align-items: center; gap: 0.35rem; color: var(--gold-400); font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.hustle-label::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 0 3px rgba(255, 201, 60, 0.25); }
.hustle-title { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.hustle-step { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: rgba(255, 255, 255, 0.82); line-height: 1.35; }
.hustle-meta { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--purple-300); text-transform: uppercase; letter-spacing: 0.06em; }
.hustle.is-updated .hustle-step { animation: step-flash 900ms var(--ease-out); }
@keyframes step-flash { 0% { color: var(--gold-400); transform: translateX(-4px); } 100% { color: rgba(255, 255, 255, 0.82); transform: none; } }
@media (max-width: 420px) { .hustle { width: min(14rem, calc(100vw - 2rem)); padding: var(--sp-2) var(--sp-3); } }

/* ---------- Skill levels in the phone ---------- */
.skill-row .level { font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--ink-400); text-transform: uppercase; letter-spacing: 0.05em; }
.skill-row .value { display: flex; align-items: baseline; gap: 0.4rem; }
/* Skill progress uses the purple accent from tokens.css; the bar shows progress to the next level. */
.skill-row .value { color: var(--accent-strong); }
.skill-row .bar { --fill: var(--accent-grad); background: var(--lilac-100); }
.skills-mini { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.skills-mini .stat-row { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--lilac-50); }
.hustle-box { display: flex; flex-direction: column; gap: 0.15rem; padding: var(--sp-3); border-radius: var(--r-md); background: linear-gradient(145deg, #2a1d4a, #1a1230); color: var(--white); }
.hustle-box .t-label { color: var(--gold-400); font-size: var(--fs-2xs); }
.hustle-box strong { font-size: var(--fs-sm); }
.hustle-box span:last-child { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.8); }

/* ---------- Shop tab ---------- */
.shop-cash { flex-direction: row; justify-content: space-between; align-items: center; }
.shop-cat { color: var(--ink-400); font-size: var(--fs-2xs); margin-top: var(--sp-1); }
.shop-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--surface-raised);
  box-shadow: 0 0 0 1px var(--lilac-100) inset, var(--shadow-sm);
  transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-spring);
}
.shop-item.is-active { box-shadow: 0 0 0 2px var(--accent) inset, var(--shadow-accent); transform: translateY(-1px); }
.shop-icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--r-sm);
  background: linear-gradient(145deg, var(--lilac-50), var(--lilac-200));
  font-size: 1.45rem;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.shop-item.is-owned .shop-icon { background: linear-gradient(145deg, #fff3d6, #ffd9a0); }
.shop-info { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.shop-item > .btn { grid-column: 2; justify-self: start; }
.shop-name { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.shop-perks { display: flex; flex-wrap: wrap; gap: 0.2rem; }
.shop-perks .chip { font-size: 0.6rem; }
.shop-desc { font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--ink-500); line-height: 1.35; }
.btn-sm { min-height: 2rem; padding: 0 var(--sp-3); font-size: var(--fs-2xs); }
.btn-sm .icon { font-size: 0.8rem; }
.ui .btn-done { background: color-mix(in srgb, var(--green-500) 14%, white); color: var(--green-500); }
.ui .btn[disabled] { cursor: default; opacity: 0.75; }
.ui .btn-ghost[disabled] { color: var(--ink-400); }

/* ---------- Promotion modal ---------- */
.promo-layer { background: var(--scrim); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fade-in var(--dur-med) var(--ease-out) both; }
.promo {
  --career: var(--accent);
  position: relative;
  width: min(100%, 24rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--career) 0%, #7b2ff7 50%, #ff4f8b 100%);
  box-shadow: var(--shadow-lg), 0 0 60px color-mix(in srgb, var(--career) 45%, transparent);
  color: var(--white);
  text-align: center;
  overflow: hidden;
  animation: promo-in 650ms var(--ease-spring) both;
}
@keyframes promo-in { from { opacity: 0; transform: scale(0.6) rotate(-3deg); } to { opacity: 1; transform: none; } }
.promo-badge {
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.1), 0 12px 30px rgba(20, 5, 50, 0.35);
  font-size: 2.8rem;
  animation: badge-spin 900ms var(--ease-spring) 200ms both;
}
@keyframes badge-spin { from { transform: scale(0) rotate(-120deg); } to { transform: none; } }
.promo-eyebrow { font-size: var(--fs-xs); font-weight: var(--fw-black); text-transform: uppercase; letter-spacing: 0.3em; color: #ffe08a; }
.promo-title { margin: 0; font-size: var(--fs-2xl); font-weight: var(--fw-black); text-transform: uppercase; line-height: 1.05; text-shadow: 0 4px 16px rgba(20, 5, 50, 0.35); }
.promo-body { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: rgba(255, 255, 255, 0.9); line-height: var(--lh-body); }
.promo-pay {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 1.1em;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.95);
  color: var(--green-500);
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  box-shadow: var(--shadow-md);
}
.promo .btn { margin-top: var(--sp-2); background: var(--white); color: var(--accent-strong); box-shadow: var(--shadow-md); }
.confetti { position: absolute; top: -10%; width: 0.5rem; height: 0.9rem; border-radius: 2px; animation: confetti-fall 2.6s linear infinite; opacity: 0.9; }
@keyframes confetti-fall {
  from { transform: translateY(0) rotate(0deg); }
  to { transform: translateY(34rem) rotate(540deg); }
}
.promo > :not(.confetti) { position: relative; z-index: 1; }
.confetti { z-index: 0; }

/* ---------- Touch controls (shown on touch devices: html.touch) ---------- */
.touch-only { display: none; }
html.touch .touch-only { display: block; }
.joy-zone {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(46vw, 15rem);
  height: min(40vh, 14rem);
  pointer-events: auto;
  touch-action: none;
  transition: opacity var(--dur-med) var(--ease-out);
}
.joy-base {
  position: absolute;
  left: calc(1.1rem + var(--safe-left));
  bottom: calc(1.3rem + var(--safe-bottom));
  width: 8.2rem;
  height: 8.2rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248, 248, 248, 0.08) 0%, rgba(248, 248, 248, 0.2) 100%);
  border: 1.5px solid rgba(248, 248, 248, 0.35);
  box-shadow: var(--shadow-md), inset 0 0 18px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0.5;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-spring);
}
.joy-ring {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.35);
}
.joy-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3.3rem;
  height: 3.3rem;
  margin: -1.65rem 0 0 -1.65rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, var(--cream) 60%, var(--lilac-200));
  box-shadow: 0 6px 16px rgba(12, 6, 26, 0.35);
  transition: transform 90ms var(--ease-out);
}
.joy-zone.is-active .joy-base { opacity: 0.95; transform: scale(1.04); }
.joy-zone.is-active .joy-knob { transition: none; }

.act-btn {
  position: absolute;
  right: calc(1.3rem + var(--safe-right));
  bottom: calc(2rem + var(--safe-bottom));
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 50%;
  background: var(--accent-grad);
  box-shadow: var(--shadow-accent);
  border: 2px solid rgba(255, 255, 255, 0.4);
  pointer-events: auto;
  touch-action: none;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-fast) var(--ease-out), filter var(--dur-med);
}
.act-icon { display: grid; place-items: center; font-size: 1.9rem; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.act-btn.is-idle { opacity: 0.45; filter: saturate(0.3); }
.act-btn.is-pressed { animation: act-press 260ms var(--ease-spring); }
@keyframes act-press { 40% { transform: scale(0.86); } }
/* On touch screens the hint sits above the controls. */
html.touch .hud-hint { bottom: calc(9.8rem + var(--safe-bottom)); }

/* Emoji icons in ring menus. */
.ring-emoji { font-size: 1.45rem; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.ring-item.is-active .ring-emoji { filter: drop-shadow(0 2px 4px rgba(20, 5, 50, 0.35)); }
html.touch .hud-hint .key { display: none; }
/* Hidden while dialogs are open (placed last so it wins over the idle state). */
.joy-zone.is-hidden, .act-btn.is-hidden { opacity: 0; pointer-events: none; }

/* ---------- Five phone tabs: tighter labels ---------- */
.tab { font-size: 0.56rem; letter-spacing: 0.04em; padding: 0 0.1rem; }

/* ---------- Rent, roommate, romance ---------- */
.rent-card { display: flex; flex-direction: column; gap: 0.35rem; padding: var(--sp-3); border-radius: var(--r-md); background: var(--lilac-50); box-shadow: 0 0 0 1px var(--lilac-100) inset; }
.rent-top { display: flex; justify-content: space-between; align-items: center; }
.rent-top .t-label { color: var(--ink-400); font-size: var(--fs-2xs); }
.rent-icon { font-size: 1rem; }
.rent-card strong { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.rent-card .bar { --fill: var(--accent-grad); }
.rent-card.is-urgent { background: color-mix(in srgb, var(--coral-500) 10%, white); box-shadow: 0 0 0 1px color-mix(in srgb, var(--coral-500) 35%, white) inset; }
.rent-card.is-urgent strong { color: var(--coral-500); }
.rent-card.is-urgent .bar { --fill: var(--warm-grad); }
.rent-card.is-free strong { color: var(--green-500); }
.roommate-card { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); background: linear-gradient(135deg, #fff0f5, #f3ecff); }
.roommate-card .avatar { width: 2.4rem; height: 2.4rem; background: var(--warm-grad); }
.roommate-card .who { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.roommate-card .t-label { color: var(--pink-500); font-size: var(--fs-2xs); }
.roommate-card strong { font-size: var(--fs-sm); }
.roommate-card .who > span:last-child { font-size: var(--fs-2xs); color: var(--ink-500); font-weight: var(--fw-medium); }
.person .romance { font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--pink-500); }

/* ---------- Homes (real estate) ---------- */
.homes-head { display: flex; flex-direction: column; gap: 0.1rem; }
.homes-head .t-body { font-size: var(--fs-xs); }
.home-card { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-raised); box-shadow: 0 0 0 1px var(--lilac-100) inset, var(--shadow-sm); }
.home-card.is-current { box-shadow: 0 0 0 2px var(--accent) inset, var(--shadow-accent); }
.home-hero {
  position: relative;
  height: 5.5rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: var(--sp-3);
  background:
    linear-gradient(0deg, rgba(22, 11, 51, 0.85) 0 18%, transparent 18%),
    linear-gradient(90deg, transparent 0 8%, rgba(22, 11, 51, 0.85) 8% 16%, transparent 16% 22%, rgba(22, 11, 51, 0.85) 22% 27%, transparent 27% 60%, rgba(22, 11, 51, 0.85) 60% 70%, transparent 70% 78%, rgba(22, 11, 51, 0.85) 78% 90%, transparent 90%) bottom / 100% 55% no-repeat,
    var(--sunset);
}
.home-hero.home-apartment { background: linear-gradient(0deg, rgba(40, 30, 20, 0.35) 0 20%, transparent 20%), linear-gradient(160deg, #ffd9a0, #ff9a6b); }
.home-icon { font-size: 2.2rem; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); }
.home-price { padding: 0.25em 0.8em; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.95); color: var(--accent-strong); font-size: var(--fs-sm); font-weight: var(--fw-black); }
.home-info { display: flex; flex-direction: column; gap: 0.35rem; padding: var(--sp-3); }
.home-info > .btn { align-self: flex-start; margin-top: 0.2rem; }
.home-perks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.2rem; }
.home-perks li { display: flex; align-items: center; gap: 0.35rem; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--ink-700); }
.home-perks .icon { color: var(--green-500); font-size: 0.8rem; }

/* ---------- Incoming call (landlord) ---------- */
.call-layer { background: rgba(10, 5, 22, 0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade-in var(--dur-med) var(--ease-out) both; }
.call {
  width: min(100%, 21rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  border-radius: 2rem;
  background: linear-gradient(180deg, #2c1161 0%, #5a1d8c 45%, #d44a86 100%);
  box-shadow: var(--shadow-lg);
  color: var(--white);
  text-align: center;
  animation: call-in 500ms var(--ease-spring) both, call-shake 1.2s ease-in-out 600ms 3;
}
@keyframes call-in { from { opacity: 0; transform: translateY(40px) scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes call-shake { 0%, 100% { transform: none; } 10%, 30% { transform: rotate(-1.5deg); } 20%, 40% { transform: rotate(1.5deg); } 50% { transform: none; } }
.call-eyebrow { font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: rgba(255, 255, 255, 0.75); }
.call-avatar { position: relative; display: grid; place-items: center; width: 6rem; height: 6rem; margin: var(--sp-3) 0; }
.call-face { position: relative; display: grid; place-items: center; width: 5.2rem; height: 5.2rem; border-radius: 50%; background: var(--cream); font-size: 2.6rem; box-shadow: var(--shadow-md); z-index: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.call-pulse { position: absolute; inset: 0.4rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.6); animation: call-ring 1.8s ease-out infinite; }
.call-pulse + .call-pulse { animation-delay: 0.9s; }
@keyframes call-ring { from { transform: scale(0.9); opacity: 0.9; } to { transform: scale(1.8); opacity: 0; } }
.call-name { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-black); }
.call-line { margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--cream); color: var(--ink-700); font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.4; box-shadow: var(--shadow-sm); }
.call-actions { display: flex; justify-content: center; gap: var(--sp-6); margin-top: var(--sp-3); }
.call-btn { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--white); }
.call-round { display: grid; place-items: center; width: 3.8rem; height: 3.8rem; border-radius: 50%; font-size: 1.5rem; box-shadow: var(--shadow-md); transition: transform var(--dur-med) var(--ease-spring); }
.call-pay .call-round { background: #22c55e; }
.call-decline .call-round { background: #ef4444; }
.call-btn.is-active .call-round { transform: scale(1.14); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35), var(--shadow-md); }
.ui .call-btn[disabled] { opacity: 0.45; cursor: default; }

/* ---------- HUD sound toggle ---------- */
.hud-right { display: flex; align-items: center; gap: var(--sp-2); }
.hud-sound {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  color: var(--white);
  font-size: 1.05rem;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hud-sound.is-muted { color: var(--coral-500); }

/* ---------- Story intro (cinematic) ---------- */
.story-layer {
  display: grid;
  place-items: center;
  padding: 12vh var(--sp-4);
  background: radial-gradient(120% 90% at 50% 40%, rgba(90, 29, 140, 0.55), rgba(10, 5, 22, 0.92));
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: fade-in 600ms var(--ease-out) both;
}
.story-bar { position: absolute; left: 0; right: 0; height: 9vh; background: #07040f; animation: bar-in 700ms var(--ease-out) both; }
.story-bar.top { top: 0; transform-origin: top; }
.story-bar.bottom { bottom: 0; transform-origin: bottom; }
@keyframes bar-in { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.story-card {
  position: relative;
  width: min(100%, 30rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.story-card.is-turn { animation: story-turn 520ms var(--ease-spring) both; }
@keyframes story-turn { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }
.story-art {
  display: grid;
  place-items: center;
  width: 5.2rem;
  height: 5.2rem;
  margin-top: -4.6rem;
  border-radius: 50%;
  background: var(--sunset);
  box-shadow: 0 0 0 6px var(--surface), var(--shadow-md);
  font-size: 2.5rem;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.story-eyebrow { font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--accent); }
.story-title { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-black); text-transform: uppercase; line-height: 1.1; }
.story-text { margin: 0; min-height: 4.5em; color: var(--ink-700); font-size: var(--fs-md); font-weight: var(--fw-medium); line-height: var(--lh-body); }
.story-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%; margin-top: var(--sp-2); }
.story-dots { display: flex; gap: 0.35rem; }
.story-dot { width: 0.5rem; height: 0.5rem; border-radius: var(--r-pill); background: var(--lilac-200); transition: width var(--dur-med) var(--ease-out), background-color var(--dur-med); }
.story-dot.is-active { width: 1.4rem; background: var(--accent); }

/* AI character portraits in avatars: head and shoulders of the front view. */
.avatar.has-portrait { overflow: hidden; background: linear-gradient(160deg, #fff3e3, #f1dcff); box-shadow: 0 0 0 2px var(--white), var(--shadow-sm); }
.avatar.has-portrait img { width: 190%; height: auto; margin-top: 8%; display: block; margin-left: -45%; pointer-events: none; }
.speech-head .avatar.has-portrait { width: 3.2rem; height: 3.2rem; }