/* Clean 2D direction — softer than pure pixel, still web-native */
:root {
  --c2d-radius: 16px;
  --c2d-shadow: 0 8px 28px rgba(0,0,0,.28);
}

/* Soften pixel hard edges when clean2d loads after pixel.css */
.btn-primary, .btn-action, .btn-exit, .btn-talk, .btn-buy, .obj-card, .room-tab, .auth-tab {
  border-radius: 12px !important;
  box-shadow: 0 4px 0 rgba(0,0,0,.2) !important;
}
.auth-card, .create-panel, .action-panel, .side-panel,
.interior-stage, .interior-chat, .chat-dock {
  border-radius: 18px !important;
  box-shadow: var(--c2d-shadow) !important;
}
.map-container {
  border-radius: 16px !important;
  border-width: 2px !important;
  box-shadow: var(--c2d-shadow) !important;
}
.location-pin .pin-label {
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.35) !important;
}
.toast {
  border-radius: 999px !important;
}
.stat-money, .need-bar {
  border-radius: 8px !important;
  box-shadow: none !important;
}
.need-bar {
  border-width: 0 !important;
  height: 6px;
}

/* Always-on goals strip */
.goals-strip {
  position: fixed;
  left: 10px;
  top: 120px;
  z-index: 35;
  width: min(220px, 42vw);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  pointer-events: none;
}
.goals-strip .goal-chip {
  pointer-events: auto;
  background: rgba(255,255,255,.94);
  color: #1a120b;
  border-radius: 12px;
  padding: 0.5rem 0.65rem;
  font-size: 0.75rem;
  box-shadow: var(--c2d-shadow);
  border-left: 4px solid var(--accent);
}
.goals-strip .goal-chip.done {
  opacity: 0.55;
  border-left-color: var(--success);
}
.goals-strip .goal-chip small {
  display: block;
  color: #666;
  font-size: 0.65rem;
  margin-top: 0.15rem;
}
@media (max-width: 700px) {
  .goals-strip {
    top: auto;
    bottom: 64px;
    left: 6px;
    right: 6px;
    width: auto;
    flex-direction: row;
    overflow-x: auto;
  }
  .goals-strip .goal-chip { min-width: 140px; }
}

/* Feelings row */
.feelings-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  background: rgba(0,0,0,.25);
  position: relative;
  z-index: 16;
}
.feeling-chip {
  font-size: 0.68rem;
  background: rgba(255,255,255,.12);
  border-radius: 999px;
  padding: 0.2rem 0.5rem;
  color: var(--sand-light);
}
.feeling-chip.neg { background: rgba(163,59,43,.35); }

/* Phone modal */
.phone-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.phone-overlay.open { display: flex; }
.phone-device {
  width: min(320px, 100%);
  background: linear-gradient(160deg, #2a1f4d, #c45c2a 50%, #e8a040);
  border-radius: 28px;
  padding: 0.75rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  color: #fff;
}
.phone-screen {
  background: rgba(10,8,20,.92);
  border-radius: 20px;
  padding: 0.85rem;
  min-height: 380px;
}
.phone-status {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  opacity: 0.8;
  margin-bottom: 0.5rem;
}
.phone-time-big {
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.1;
}
.phone-sub {
  text-align: center;
  font-size: 0.75rem;
  opacity: 0.75;
  margin-bottom: 0.85rem;
}
.phone-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.55rem;
}
.phone-app {
  background: rgba(255,255,255,.12);
  border: none;
  border-radius: 14px;
  padding: 0.55rem 0.25rem;
  color: #fff;
  font-size: 0.62rem;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.phone-app span { font-size: 1.25rem; }
.phone-app:active { transform: scale(0.96); }
.phone-panel {
  margin-top: 0.75rem;
  background: rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 0.65rem;
  font-size: 0.78rem;
  max-height: 140px;
  overflow-y: auto;
}
.phone-close {
  display: block;
  width: 100%;
  margin-top: 0.65rem;
  background: rgba(255,255,255,.2);
  border: none;
  color: #fff;
  padding: 0.55rem;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
}

/* Money + button */
.money-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--accent);
  color: #1a120b;
  border: none;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}

/* Billboard strip on map edge */
.billboard-hint {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 12;
  max-width: 140px;
  background: rgba(255,255,255,.9);
  color: #222;
  font-size: 0.65rem;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  box-shadow: var(--c2d-shadow);
}