/* =================
   Uebernommen aus der bereitgestellten Vorlage (SCSS -> CSS),
   mit unseren Staedtenamen/Farben statt der US-Originalnamen.
   ================= */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;700&display=swap');

.board-scope {
  --black: #080808;
  --board: #fafaf8;
  --braun: #8b5a2b;
  --hellblau: #87ceeb;
  --pink: #e91e8c;
  --orange: #ff9800;
  --rot: #e53935;
  --gelb: #ffee00;
  --gruen: #2e7d32;
  --blau: #1565c0;
}

.board-scope * { box-sizing: border-box; }

.board-scope {
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 10px;
  color: var(--black);
  text-transform: uppercase;
}

.board-scope h1, .board-scope h2 { margin: 0; }

/* Farbgruppen */
.board-scope .braun { background: var(--braun); }
.board-scope .hellblau { background: var(--hellblau); }
.board-scope .pink { background: var(--pink); }
.board-scope .orange { background: var(--orange); }
.board-scope .rot { background: var(--rot); }
.board-scope .gelb { background: var(--gelb); }
.board-scope .gruen { background: var(--gruen); }
.board-scope .blau { background: var(--blau); }

/* Tisch & Brett */
.board-scope .table-wrap {
  overflow-x: auto;
  padding: 20px 0;
}
.board-scope .table {
  padding-left: 20px;
  padding-right: 20px;
  width: fit-content;
  margin: 0 auto;
}
.board-scope .board {
  display: grid;
  grid-template-columns: 100px repeat(9, 64px) 100px;
  grid-template-rows: 100px repeat(9, 64px) 100px;
  grid-gap: 2px;
  width: 796px;
  height: 796px;
  background: var(--black);
  border: 2px solid var(--black);
}

.board-scope .center {
  grid-column: 2 / 11;
  grid-row: 2 / 11;
  background: var(--board);
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
  justify-items: center;
  align-items: center;
  position: relative;
}
.board-scope .title {
  grid-column: 1 / 9;
  grid-row: 4;
  font-size: 62px;
  font-weight: 400;
  letter-spacing: 8px;
  text-align: center;
  color: var(--black);
}
.board-scope .community-chest-deck {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  transform: rotate(135deg);
  margin-bottom: 40px;
  margin-right: 40px;
}
.board-scope .chance-deck {
  grid-column: 5 / 7;
  grid-row: 5 / 7;
  transform: rotate(315deg);
  margin-top: 40px;
  margin-left: 40px;
}
.board-scope .label { text-align: center; font-weight: 500; letter-spacing: 2px; padding-bottom: 8px; }
.board-scope .deck { border: 2px dashed var(--black); width: 110px; height: 80px; }

/* Reihen */
.board-scope .row { display: grid; grid-gap: 2px; }
.board-scope .horizontal-row { grid-template-columns: repeat(9, 64px); grid-template-rows: 100px; }
.board-scope .vertical-row { grid-template-columns: 100px; grid-template-rows: repeat(9, 64px); }
.board-scope .vertical-row .container { top: 50%; left: 50%; }

.board-scope .bottom-row { grid-column: 2 / 11; grid-row: 11; }
.board-scope .left-row { grid-column: 1; grid-row: 2 / 11; }
.board-scope .left-row .container { transform: translate(-50%, -50%) rotate(90deg); }
.board-scope .top-row { grid-column: 2 / 11; grid-row: 1; }
.board-scope .top-row .container { transform: rotate(180deg); }
.board-scope .right-row { grid-column: 11; grid-row: 2 / 11; }
.board-scope .right-row .container { transform: translate(-50%, -50%) rotate(270deg); }

/* Felder */
.board-scope .space {
  background: var(--board);
  text-align: center;
  position: relative;
}
.board-scope .space .container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transform-origin: center;
  height: 100px;
  width: 64px;
  margin: 0 auto;
}
.board-scope .space .name, .board-scope .space .instructions { padding-left: 6px; padding-right: 6px; font-size: 8px; }
.board-scope .space .price { font-size: 7px; font-weight: 400; padding-bottom: 4px; }

.board-scope .corner .container { justify-content: space-around; height: 100%; width: 100%; }
.board-scope .corner .name { padding: 0; }

.board-scope .property .color-bar { height: 20px; border-bottom: 2px solid var(--black); }
.board-scope .property .name { padding-bottom: 30px; padding-top: 4px; }

.board-scope .railroad .name, .board-scope .utility .name, .board-scope .fee .name { padding-top: 8px; }
.board-scope .railroad .drawing, .board-scope .utility .drawing { font-size: 34px; }
.board-scope .fee .name { font-size: 11px; }
.board-scope .fee .instructions { font-size: 8px; }

/* Ecken */
.board-scope .go .container { justify-content: flex-start; transform: rotate(315deg); }
.board-scope .go .instructions { padding: 0 20px; }
.board-scope .go .go-word { font-size: 38px; color: var(--rot); }
.board-scope .go .arrow { font-size: 28px; color: var(--rot); position: absolute; bottom: -6px; left: 4px; }

.board-scope .jail { display: flex; align-items: center; justify-content: center; }
.board-scope .jail .container { align-items: center; transform: rotate(45deg); justify-content: center; gap: 4px; }
.board-scope .jail .name { font-size: 10px; }
.board-scope .jail .window {
  display: flex; justify-content: space-around; align-items: center; position: relative;
  width: 38px; height: 38px; background: var(--board); border: 2px solid var(--black);
}
.board-scope .jail .person { font-size: 22px; }
.board-scope .jail .bar { height: 38px; width: 2px; background: var(--black); }

.board-scope .free-parking .container { justify-content: center; transform: rotate(135deg); }
.board-scope .free-parking .name { font-size: 11px; }
.board-scope .free-parking .drawing { font-size: 34px; color: var(--rot); padding: 4px 0; }

.board-scope .go-to-jail .container { justify-content: center; transform: rotate(225deg); }
.board-scope .go-to-jail .name { font-size: 11px; }
.board-scope .go-to-jail .drawing { font-size: 34px; color: var(--braun); padding: 4px 0; }

.board-scope .chance .container { justify-content: center; }
.board-scope .chance .drawing { font-size: 44px; color: var(--rot); }
.board-scope .community-chest .container { justify-content: space-around; }
.board-scope .community-chest .drawing { font-size: 30px; color: var(--hellblau); }
.board-scope .community-chest .instructions { font-size: 7px; }

.board-scope .income-tax .container { justify-content: center; align-items: center; }
.board-scope .income-tax .diamond { width: 5px; height: 5px; background: var(--black); transform: rotate(45deg); display: inline-block; }
.board-scope .luxury-tax .drawing { font-size: 30px; }

.board-scope .long-name { padding-left: 0 !important; padding-right: 0 !important; }
.board-scope .three-line-name { position: relative; top: 3px; }

/* ---------- Spielfiguren & Besitzmarkierung (Ergaenzung) ---------- */
.board-scope .tokens-layer {
  position: absolute;
  top: 2px; left: 2px; right: 2px;
  display: flex; flex-wrap: wrap; gap: 2px;
  z-index: 3;
}
.board-scope .mini-token {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid var(--black);
  font-size: 7px; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700;
}
.board-scope .space.owned-me { box-shadow: inset 0 0 0 3px var(--gelb); }

@media (max-width: 900px) {
  .board-scope .board { transform: scale(0.62); transform-origin: top left; margin-bottom: -300px; }
}