/* ===== Hansekontor ===== */

/* Waren */
.hk-g0 { --hk-c: #e6eaf4; --hk-d: #aab2c8; --hk-ink: #23263f; }
.hk-g1 { --hk-c: #4a8fe8; --hk-d: #2157ad; --hk-ink: #fff; }
.hk-g2 { --hk-c: #55b96a; --hk-d: #23803a; --hk-ink: #fff; }
.hk-g3 { --hk-c: #e2605a; --hk-d: #a52c2c; --hk-ink: #fff; }
.hk-g4 { --hk-c: #a8744a; --hk-d: #6b4022; --hk-ink: #fff; }
.hk-g5 { --hk-c: #b68ae6; --hk-d: #6f3fb0; --hk-ink: #fff; }

.hk-market {
  background: radial-gradient(circle at 50% 0%, #2a3350 0%, #18213d 85%);
}

/* Gilden */
.hk-guilds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.hk-guild {
  flex: 1 1 86px;
  max-width: 130px;
  padding: 6px 8px;
  border-radius: 10px;
  background: linear-gradient(160deg, #4a3f2b, #2c2a3f);
  box-shadow: inset 0 0 0 1px rgba(255, 184, 48, 0.35);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 6px;
  row-gap: 4px;
}
.hk-guild strong {
  font-size: 1.1rem;
  color: var(--accent);
}
.hk-guild small {
  font-size: 0.68rem;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hk-guild .hk-cost {
  grid-column: 1 / -1;
}

/* Auslage */
.hk-rows {
  --hk-w: min(calc((100vw - 84px) / 5), 84px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hk-row {
  display: grid;
  grid-template-columns: repeat(5, var(--hk-w));
  gap: 6px;
  justify-content: center;
}
.hk-card {
  width: var(--hk-w, 64px);
  aspect-ratio: 5 / 7;
  border-radius: 8px;
  background: #2a2d52;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hk-card.empty {
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.hk-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 5px;
  min-height: 1.7em;
  font-size: calc(var(--hk-w, 64px) * 0.24);
  line-height: 1.2;
  color: #fff;
}
.hk-b0 .hk-card-top { background: linear-gradient(145deg, #d5dbea, #8f98b3); color: #23263f; }
.hk-b1 .hk-card-top { background: linear-gradient(145deg, #4a8fe8, #2157ad); }
.hk-b2 .hk-card-top { background: linear-gradient(145deg, #55b96a, #23803a); }
.hk-b3 .hk-card-top { background: linear-gradient(145deg, #e2605a, #a52c2c); }
.hk-b4 .hk-card-top { background: linear-gradient(145deg, #a8744a, #6b4022); }
.hk-cost {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
}
.hk-pip {
  width: 1.55em;
  height: 1.55em;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--hk-ink);
  background: linear-gradient(145deg, var(--hk-c), var(--hk-d));
}
.hk-pip.sq {
  border-radius: 3px;
}
.hk-pip.paid {
  opacity: 0.35;
}
.hk-card.back {
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 6px, transparent 6px 12px), #3b3f6e;
}
.hk-card.back small {
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--text-dim);
}
.hk-card.back.hk-t1 { background-color: #4f4a2e; }
.hk-card.back.hk-t2 { background-color: #2e4a5a; }
.hk-card.back.empty {
  opacity: 0.3;
}
.hk-card.can {
  cursor: pointer;
}
.hk-card.buyable {
  box-shadow: 0 0 0 2px var(--good);
}
.hk-card.can:hover,
.hk-card.chosen {
  transform: translateY(-3px);
}
.hk-card.chosen {
  box-shadow: 0 0 0 3px var(--accent), 0 4px 10px rgba(0, 0, 0, 0.4);
}
.hk-card:focus-visible,
.hk-hold:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.hk-new {
  animation: hk-in 0.5s ease-out;
}

/* Hafen */
.hk-harbor h3 {
  margin-bottom: 8px;
}
.hk-bank {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.hk-chip {
  position: relative;
  aspect-ratio: 1;
  max-width: 64px;
  width: 100%;
  justify-self: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  font-size: 1.1rem;
  color: var(--hk-ink);
  background: linear-gradient(145deg, var(--hk-c), var(--hk-d));
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hk-chip b {
  font-size: 0.85rem;
}
.hk-chip:disabled {
  cursor: default;
  opacity: 0.75;
}
.hk-chip.out {
  opacity: 0.3;
}
.hk-chip.chosen {
  transform: translateY(-3px);
  box-shadow: 0 0 0 3px var(--accent), 0 4px 10px rgba(0, 0, 0, 0.4);
}
.hk-chip em,
.hk-hold em {
  position: absolute;
  top: -6px;
  right: -4px;
  padding: 1px 5px;
  border-radius: 999px;
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 700;
  color: #1f2240;
  background: var(--accent);
}
.hk-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.hk-actions:empty {
  display: none;
}
.hk-hint {
  margin: 8px 0 0;
}
.hk-hint:empty {
  display: none;
}

/* Kontore */
.hk-board {
  padding: 8px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
  transition: box-shadow 0.2s ease;
}
.hk-board.active {
  box-shadow: 0 0 0 2px rgba(255, 184, 48, 0.55);
}
.hk-board-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.9rem;
}
.hk-holds {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.hk-hold {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 0;
  border-radius: 8px;
}
.hk-hold.can {
  cursor: pointer;
  box-shadow: 0 0 0 2px var(--accent);
  background: rgba(255, 184, 48, 0.12);
}
.hk-hold.chosen {
  background: rgba(255, 184, 48, 0.3);
}
.hk-hold-emo {
  font-size: 0.95rem;
}
.hk-bonus,
.hk-stone {
  width: 1.7em;
  height: 1.7em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--hk-ink);
  background: linear-gradient(145deg, var(--hk-c), var(--hk-d));
}
.hk-bonus {
  border-radius: 4px;
}
.hk-bonus.none {
  background: none;
}
.hk-stone {
  border-radius: 50%;
}
.hk-bonus.zero,
.hk-stone.zero {
  opacity: 0.25;
}
.hk-sub {
  margin: 8px 0 0;
  font-size: 0.75rem;
  color: var(--text-dim);
}
.hk-reserved {
  --hk-w: 58px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.hk-reserved small {
  font-size: 0.7rem;
  color: var(--text-dim);
  width: 100%;
}
.hk-others {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.hk-others .hk-reserved {
  --hk-w: 46px;
}
.hk-others .hk-reserved .hk-pip {
  font-size: 0.55rem;
}
.hk-fresh {
  animation: hk-flash 0.8s ease-out;
}

@keyframes hk-flash {
  0% { background: rgba(255, 184, 48, 0.45); }
  100% { background: rgba(0, 0, 0, 0.18); }
}
@keyframes hk-in {
  0% { opacity: 0; transform: translateY(-8px) scale(0.92); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hk-fresh,
  .hk-new {
    animation: none;
  }
}