:root {
  color-scheme: light;
  --ink: #17212b;
  --muted: #66717d;
  --paper: #f7f6f0;
  --panel: #ffffff;
  --line: #d9ded7;
  --green: #2f8f6b;
  --green-dark: #1f654b;
  --blue: #2f6f9f;
  --amber: #d88b22;
  --red: #c94d42;
  --coal: #2c3135;
  --shadow: 0 18px 44px rgba(27, 36, 43, 0.12);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(247, 246, 240, 0.96)),
    radial-gradient(circle at 16% 10%, rgba(47, 143, 107, 0.16), transparent 28%),
    radial-gradient(circle at 84% 16%, rgba(216, 139, 34, 0.14), transparent 22%),
    var(--paper);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

body[data-theme="harbor"] {
  --green: #267f7a;
  --blue: #245f86;
  --amber: #d69b33;
  --paper: #f3f7f5;
}

body[data-theme="metro"] {
  --green: #4c7c54;
  --blue: #5a6fa4;
  --amber: #c58235;
  --paper: #f5f3f0;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(252px, 300px) minmax(420px, 1fr) minmax(260px, 320px);
  gap: 18px;
  min-height: 100vh;
  padding: 18px;
}

.sidebar,
.right-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.brand-block,
.topbar,
.session-bar,
.panel {
  border: 1px solid rgba(23, 33, 43, 0.09);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow);
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 80px;
  padding: 16px;
  border-radius: 8px;
}

.brand-mark {
  display: grid;
  grid-template-columns: repeat(3, 10px);
  align-items: end;
  gap: 4px;
  width: 48px;
  height: 48px;
  padding: 9px;
  border-radius: 8px;
  background: var(--coal);
}

.brand-mark span {
  display: block;
  border-radius: 2px 2px 0 0;
  background: #f2c94c;
}

.brand-mark span:nth-child(1) {
  height: 18px;
}

.brand-mark span:nth-child(2) {
  height: 28px;
  background: #72c7a4;
}

.brand-mark span:nth-child(3) {
  height: 22px;
  background: #9cc6de;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  font-size: 1.42rem;
  line-height: 1.1;
}

h2 {
  font-size: 1rem;
  line-height: 1.2;
}

.panel {
  padding: 14px;
  border-radius: 8px;
}

.panel.compact {
  display: grid;
  gap: 12px;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.panel-heading span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.progress-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  margin: 0 auto;
}

.progress-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.progress-ring circle {
  fill: none;
  stroke-width: 10;
}

.progress-ring .track {
  stroke: #e5e8e0;
}

.progress-ring .meter {
  stroke: var(--green);
  stroke-linecap: round;
  stroke-dasharray: 302;
  stroke-dashoffset: 302;
  transition: stroke-dashoffset 300ms ease;
}

.progress-ring div {
  display: grid;
  place-items: center;
}

.progress-ring strong {
  font-size: 1.7rem;
  line-height: 1;
}

.progress-ring span {
  color: var(--muted);
  font-size: 0.8rem;
}

.stat-grid,
.slot-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.stat-grid div,
.rules div {
  display: grid;
  gap: 4px;
  min-height: 56px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfbf8;
}

.stat-grid span,
.rules span {
  color: var(--muted);
  font-size: 0.78rem;
}

.stat-grid strong,
.rules strong {
  font-size: 0.96rem;
}

.field {
  display: grid;
  gap: 6px;
}

.field span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

input,
select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--ink);
  background: #fff;
}

.button,
.icon-button {
  border: 1px solid rgba(23, 33, 43, 0.12);
  border-radius: 8px;
  color: var(--ink);
  background: #f5f6f2;
  font-weight: 800;
  transition:
    transform 140ms ease,
    box-shadow 140ms ease,
    background 140ms ease;
}

.button {
  min-height: 42px;
  padding: 0 14px;
}

.button:hover,
.icon-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(27, 36, 43, 0.12);
}

.button:disabled,
.icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
  box-shadow: none;
}

.button.primary,
.icon-button.primary {
  color: #fff;
  background: var(--green);
}

.button.warning {
  color: #472700;
  background: #ffd58c;
}

.button.ghost {
  background: transparent;
}

.button.small {
  min-height: 34px;
  padding: 0 10px;
  font-size: 0.82rem;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
}

.icon-button.danger {
  color: #fff;
  background: var(--red);
}

.play-icon {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid currentColor;
}

.stop-icon {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  background: currentColor;
}

.reset-icon {
  width: 18px;
  height: 18px;
  border: 3px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
}

.slot-list {
  display: grid;
  gap: 8px;
  max-height: 170px;
  overflow: auto;
}

.slot-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfbf8;
}

.slot-item span {
  color: var(--muted);
  font-size: 0.8rem;
}

.city-stage {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 14px;
  min-width: 0;
}

.topbar,
.session-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 78px;
  padding: 14px 16px;
  border-radius: 8px;
}

.topbar h2 {
  font-size: 1.35rem;
}

.topbar-actions,
.quick-actions,
.buddy-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.session-bar strong {
  display: block;
  margin-top: 3px;
  font-size: 1.32rem;
}

.session-bar span {
  color: var(--muted);
  font-weight: 700;
}

.city-wrap {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid rgba(23, 33, 43, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(180deg, #b9d9e8 0 48%, #c6d5b0 48% 74%, #7c8d74 74% 100%);
  box-shadow: var(--shadow);
}

body[data-theme="harbor"] .city-wrap {
  background:
    linear-gradient(180deg, #b6d5e1 0 45%, #8eb7bc 45% 63%, #5f8d99 63% 74%, #6f806d 74% 100%);
}

body[data-theme="metro"] .city-wrap {
  background:
    linear-gradient(180deg, #c8d3dc 0 48%, #b8c2aa 48% 74%, #6f776d 74% 100%);
}

.city-hud {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, minmax(74px, 1fr));
  gap: 8px;
  width: min(370px, calc(100% - 140px));
}

.city-hud div {
  display: grid;
  gap: 2px;
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid rgba(23, 33, 43, 0.11);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(6px);
}

.city-hud span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.city-hud strong {
  font-size: 1rem;
}

.skyline {
  position: absolute;
  inset: 0;
}

.sun {
  position: absolute;
  top: 34px;
  right: 44px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #f4c74b;
  box-shadow: 0 0 0 10px rgba(244, 199, 75, 0.22);
}

.cloud {
  position: absolute;
  width: 112px;
  height: 30px;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.68);
}

.cloud::before,
.cloud::after {
  content: "";
  position: absolute;
  bottom: 10px;
  border-radius: 50%;
  background: inherit;
}

.cloud::before {
  left: 18px;
  width: 44px;
  height: 44px;
}

.cloud::after {
  right: 16px;
  width: 34px;
  height: 34px;
}

.cloud-a {
  top: 66px;
  left: 9%;
}

.cloud-b {
  top: 118px;
  right: 19%;
  transform: scale(0.78);
}

.city-grid {
  position: absolute;
  right: 6%;
  bottom: 92px;
  left: 6%;
  display: grid;
  grid-template-columns: repeat(8, minmax(38px, 1fr));
  align-items: end;
  gap: 12px 10px;
  min-height: 330px;
  z-index: 3;
}

.lot {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  height: 92px;
  padding-bottom: 4px;
}

.building {
  position: relative;
  width: min(58px, 100%);
  min-width: 34px;
  height: calc(34px + var(--floors) * 13px);
  border: 2px solid rgba(18, 29, 36, 0.18);
  border-bottom-width: 4px;
  border-radius: 5px 5px 2px 2px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.28) 0 7px,
      transparent 7px 13px
    ),
    var(--building-color);
  box-shadow: 0 9px 0 rgba(18, 29, 36, 0.12);
}

.building::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 9px;
  right: 9px;
  height: calc(100% - 18px);
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255, 246, 172, 0.92) 0 6px,
      transparent 6px 13px
    );
  opacity: 0.78;
}

.building.saved {
  outline: 3px solid rgba(47, 143, 107, 0.44);
}

.building.saved::after {
  content: "";
  position: absolute;
  top: -10px;
  right: -7px;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--green);
}

.building.burning::after {
  content: "";
  position: absolute;
  top: -26px;
  left: 50%;
  width: 30px;
  height: 34px;
  border-radius: 55% 55% 55% 0;
  background:
    radial-gradient(circle at 54% 58%, #ffe66d 0 25%, transparent 27%),
    linear-gradient(135deg, #ffb000 0 38%, #ef4b2d 39% 100%);
  transform: translateX(-50%) rotate(-45deg);
  animation: flame 620ms ease-in-out infinite alternate;
}

.building.ruined {
  height: 36px;
  background:
    linear-gradient(145deg, transparent 0 22%, rgba(44, 49, 53, 0.3) 23% 31%, transparent 32%),
    #5d6261;
  filter: grayscale(0.55);
}

.building.repairing {
  outline: 3px solid rgba(216, 139, 34, 0.5);
}

.building.ruined::before {
  display: none;
}

.building.empty {
  height: 24px;
  border-style: dashed;
  background: rgba(255, 255, 255, 0.23);
  box-shadow: none;
}

.building.empty::before,
.building.empty::after {
  display: none;
}

@keyframes flame {
  from {
    transform: translateX(-50%) rotate(-48deg) scale(0.92);
  }
  to {
    transform: translateX(-50%) rotate(-39deg) scale(1.08);
  }
}

.road {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-around;
  height: 78px;
  background: #384049;
  z-index: 2;
}

body[data-theme="harbor"] .road {
  background: #2f5560;
}

body[data-theme="metro"] .road {
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(244, 233, 186, 0.35) 12% 14%, transparent 14%),
    #3f4448;
}

.road span {
  width: 72px;
  height: 6px;
  margin-top: 34px;
  border-radius: 20px;
  background: #f4e9ba;
}

.fire-truck {
  position: absolute;
  bottom: 48px;
  left: -150px;
  width: 118px;
  height: 54px;
  z-index: 5;
  transition: left 760ms cubic-bezier(0.2, 0.9, 0.22, 1);
}

.fire-truck.active {
  left: calc(50% - 60px);
}

.truck-body,
.truck-cab {
  position: absolute;
  bottom: 12px;
  border: 2px solid rgba(39, 20, 20, 0.25);
  background: #d93a33;
}

.truck-body {
  left: 18px;
  width: 72px;
  height: 30px;
  border-radius: 5px;
}

.truck-cab {
  right: 9px;
  width: 34px;
  height: 38px;
  border-radius: 6px 6px 4px 4px;
}

.ladder {
  position: absolute;
  top: 4px;
  left: 16px;
  width: 82px;
  height: 8px;
  border: 2px solid #f7d667;
  border-right: 0;
  border-left: 0;
  transform: rotate(-8deg);
}

.wheel {
  position: absolute;
  bottom: 4px;
  width: 20px;
  height: 20px;
  border: 4px solid #202327;
  border-radius: 50%;
  background: #d8e0e3;
}

.wheel.left {
  left: 28px;
}

.wheel.right {
  right: 14px;
}

/* ---- Social / Be with me ---- */
.social-panel {
  border-color: rgba(47, 111, 159, 0.25);
}

.social-body {
  display: grid;
  gap: 10px;
}

.social-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.code-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f4fbff;
}

.code-chip span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.code-chip strong {
  font-size: 1.15rem;
  letter-spacing: 3px;
}

.add-friend {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.add-friend input {
  text-transform: uppercase;
  letter-spacing: 2px;
}

.friend-list {
  display: grid;
  gap: 8px;
}

.friend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfbf8;
}

.friend-row.studying {
  border-color: rgba(47, 143, 107, 0.4);
  background: #f0faf5;
}

.friend-row.pending {
  border-color: rgba(216, 139, 34, 0.4);
  background: #fdf6e9;
}

.friend-row strong {
  font-size: 0.9rem;
}

.friend-row span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
}

.friend-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c2c8c0;
}

.dot.live {
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(47, 143, 107, 0.5);
  animation: pulse 1.6s ease-out infinite;
}

@keyframes pulse {
  to {
    box-shadow: 0 0 0 7px rgba(47, 143, 107, 0);
  }
}

.social-msg {
  margin: 0;
  padding: 6px 10px;
  border-radius: 6px;
  background: #eef6f1;
  color: var(--green-dark);
  font-size: 0.8rem;
}

.social-msg.error {
  background: #fbecea;
  color: var(--red);
}

/* ---- Onboarding modal ---- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(23, 33, 43, 0.5);
  backdrop-filter: blur(4px);
}

.modal-card {
  display: grid;
  gap: 10px;
  width: min(380px, 100%);
  padding: 22px;
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.modal-card h2 {
  font-size: 1.6rem;
}

.modal-text {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.form-error {
  margin: 0;
  color: var(--red);
  font-size: 0.82rem;
}

.event-panel {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 300px;
}

.event-log {
  display: grid;
  align-content: start;
  gap: 8px;
  max-height: 410px;
  margin-top: 12px;
  overflow: auto;
}

.event {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border-left: 4px solid var(--green);
  border-radius: 6px;
  background: #fbfbf8;
}

.event.fire {
  border-left-color: var(--red);
}

.event.buddy {
  border-left-color: var(--blue);
}

.event strong {
  font-size: 0.86rem;
}

.event span {
  color: var(--muted);
  font-size: 0.78rem;
}

.rules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.rules div {
  min-height: 68px;
}

.hidden {
  display: none !important;
}

@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 280px 1fr;
  }

  .right-rail {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .app-shell {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  /* Stadt zuerst – sie ist der Star der App, die Steuerung folgt darunter. */
  .city-stage {
    order: 1;
  }

  .sidebar {
    order: 2;
  }

  .right-rail {
    order: 3;
    display: flex;
  }

  .topbar,
  .session-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .city-wrap {
    min-height: 480px;
  }

  .city-hud {
    grid-template-columns: repeat(3, 1fr);
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
  }

  .city-hud div {
    min-height: 46px;
    padding: 7px 8px;
  }

  .city-grid {
    grid-template-columns: repeat(5, minmax(42px, 1fr));
    gap: 10px 8px;
    bottom: 86px;
  }

  .lot {
    height: 78px;
  }

  .building {
    height: calc(30px + var(--floors) * 10px);
  }

  .sun {
    right: 22px;
    width: 52px;
    height: 52px;
  }
}