/* ===== Landstrich ===== */

/* Gelände */
.ls-t0 { background: linear-gradient(145deg, #3e9c5a, #1f6237); color: #d8ffe4; }
.ls-t1 { background: linear-gradient(145deg, #d9644b, #8f2f1f); color: #ffe6de; }
.ls-t2 { background: linear-gradient(145deg, #f0cc5a, #b98f1c); color: #5a3e00; }
.ls-t3 { background: linear-gradient(145deg, #4aa3e8, #1d5ea8); color: #e2f2ff; }
.ls-t4 { background: linear-gradient(145deg, #6b4f7a, #33233d); color: #e8c9ff; }
.ls-t5 { background: linear-gradient(145deg, #a7a58a, #6d6b55); color: #f4f2dc; }
.ls-t6 { background: linear-gradient(145deg, #f5f1e6, #c9b98a); color: #6b3d00; font-weight: 800; }

/* Jahreszeiten */
.ls-seasons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.ls-season {
  background: var(--bg-card);
  border-radius: 10px;
  padding: 6px 4px;
  text-align: center;
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0.7;
}
.ls-season b {
  color: var(--text-dim);
  font-size: 0.75rem;
}
.ls-season small {
  color: var(--accent);
  font-weight: 700;
}
.ls-season.now {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--accent);
}
.ls-season.done {
  opacity: 0.4;
}

/* Gebietskarte */
.ls-cardbox {
  background: radial-gradient(circle at 50% 0%, #2c3a33 0%, #1c2230 85%);
}
.ls-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ls-card.storm .ls-card-head strong {
  color: #e8c9ff;
}
.ls-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.ls-card-head strong {
  font-size: 1.15rem;
}
.ls-card-head small {
  color: var(--text-dim);
}
.ls-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ls-terrain {
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  opacity: 0.55;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.ls-terrain.static {
  cursor: default;
  opacity: 0.9;
}
.ls-terrain.chosen {
  opacity: 1;
  box-shadow: 0 0 0 3px var(--accent);
}
.ls-card-shapes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.ls-shape-btn {
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  border: none;
  border-radius: 10px;
  padding: 10px;
  min-width: 64px;
  min-height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.6;
}
.ls-shape-btn.static {
  cursor: default;
  opacity: 1;
}
.ls-shape-btn.chosen {
  opacity: 1;
  box-shadow: 0 0 0 3px var(--accent);
}
.ls-shape-btn em {
  position: absolute;
  top: -6px;
  right: -6px;
  font-style: normal;
  font-size: 1rem;
}
.ls-mini {
  display: inline-grid;
  gap: 2px;
}
.ls-mini i {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}
.ls-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.ls-tools .ls-tool:not(.primary) {
  background: var(--bg-input);
  color: var(--text);
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  font: inherit;
  cursor: pointer;
}
.ls-tools .primary {
  flex: 1;
  min-width: 140px;
}
.ls-tools .primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Landkarte */
.ls-map-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.9rem;
}
.ls-map {
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  gap: 2px;
  background: #0f1124;
  padding: 4px;
  border-radius: 10px;
  user-select: none;
  touch-action: manipulation;
}
.ls-c {
  aspect-ratio: 1;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.6rem, 2.6vw, 1rem);
  line-height: 1;
  position: relative;
}
.ls-empty {
  background: #e9e1c8;
}
.ls-peak {
  background: linear-gradient(145deg, #9aa0ad, #575d6b);
  color: #f4f6fb;
}
.ls-peak.ls-closed::after {
  content: '🪙';
  position: absolute;
  font-size: 0.55em;
  right: 0;
  bottom: 0;
}
.ls-ruin {
  box-shadow: inset 0 0 0 2px #7a4b2a;
}
.ls-ruin.ls-empty::before {
  content: '🏚';
  font-size: 0.8em;
  opacity: 0.6;
}
.interactive .ls-c {
  cursor: crosshair;
}
.ls-prev.ok {
  box-shadow: 0 0 0 2px var(--accent);
  z-index: 1;
}
.ls-prev.bad {
  opacity: 0.55;
  box-shadow: 0 0 0 2px var(--bad);
  z-index: 1;
}
.ls-fresh {
  animation: ls-pop 0.5s ease;
}
@keyframes ls-pop {
  0% { transform: scale(0.4); }
  70% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.ls-hint {
  margin-top: 8px;
}

.ls-map.small {
  gap: 1px;
  padding: 2px;
  border-radius: 6px;
}
.ls-map.small .ls-c {
  border-radius: 1px;
  font-size: 0;
}
.ls-map.small .ls-ruin {
  box-shadow: inset 0 0 0 1px #7a4b2a;
}
.ls-map.small .ls-c::before,
.ls-map.small .ls-c::after {
  display: none;
}
.ls-others {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.ls-others.big {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.ls-other .ls-map-head {
  font-size: 0.8rem;
  margin-bottom: 4px;
}

/* Landhüter: Schutzbereich und Fertigkeiten */
.ls-area {
  box-shadow: inset 0 0 0 2px rgba(201, 185, 138, 0.9);
}
.ls-area.ls-empty {
  background: repeating-linear-gradient(45deg, #e9e1c8 0 4px, #d8cfae 4px 8px);
}
.ls-area.hit {
  box-shadow: inset 0 0 0 3px var(--good);
}
.ls-mini i.ls-areamini {
  background: repeating-linear-gradient(45deg, rgba(201, 185, 138, 0.9) 0 3px, rgba(201, 185, 138, 0.35) 3px 6px);
}
.ls-card.guard .ls-card-head strong {
  color: #f5e3b0;
}
.ls-skills {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
}
.ls-skills-label {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.ls-skill {
  background: var(--bg-input);
  color: var(--text);
  border: none;
  border-radius: 10px;
  padding: 6px 8px;
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}
.ls-skill span {
  color: var(--accent);
  font-weight: 700;
}
.ls-skill small {
  display: block;
  color: var(--text-dim);
  font-size: 0.72rem;
  margin-top: 2px;
}
.ls-skill.chosen {
  box-shadow: 0 0 0 3px var(--accent);
}
.ls-skill:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Aufträge */
.ls-goals {
  display: grid;
  gap: 8px;
}
.ls-goal {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  opacity: 0.7;
}
.ls-goal.now {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--accent);
}
.ls-goal-cat {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent);
  color: #2a1d00;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ls-goal small {
  display: block;
  color: var(--text-dim);
  margin-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ls-fresh {
    animation: none;
  }
}