body[data-page="fort-verdediging"] main {
  max-width:1320px;
}

body[data-page="fort-verdediging"] .page-content {
  padding:0;
  overflow:hidden;
  border-radius:8px;
  background:#101820;
  color:#eef6f8;
}

.fort-app {
  min-height:720px;
  background:linear-gradient(135deg, rgba(103, 215, 181, .14), transparent 34%), linear-gradient(180deg, #15212b 0%, #0e171f 100%);
}

.fort-hero {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding:1.25rem;
  border-bottom:1px solid rgba(255, 255, 255, .12);
}

body[data-page="fort-verdediging"] .fort-kicker {
  margin:0 0 .35rem;
  color:#67d7b5;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0;
}

body[data-page="fort-verdediging"] .fort-hero h1#page-title {
  margin:0;
  color:#f7fbff;
  font-size:clamp(1.8rem, 4vw, 3.25rem);
  letter-spacing:0;
  text-shadow:0 2px 18px rgba(0, 0, 0, .32);
}

body[data-page="fort-verdediging"] .fort-intro {
  max-width:72ch;
  margin:.6rem 0 0;
  color:#eef6f8;
}

.fort-live {
  flex:0 1 360px;
  min-width:260px;
  max-width:min(100%, 360px);
  padding:.9rem 1rem;
  border:2px solid rgba(103, 215, 181, .82);
  border-radius:8px;
  background:rgba(6, 14, 20, .72);
  text-align:right;
  box-shadow:0 0 0 4px rgba(103, 215, 181, .12), 0 14px 34px rgba(0, 0, 0, .24);
}

.fort-live span,
.fort-status-grid span {
  display:block;
  color:#d7e6ee;
  font-size:.88rem;
  overflow-wrap:anywhere;
}

.fort-live strong,
.fort-status-grid strong {
  display:block;
  color:#fff;
  font-size:1.15rem;
  line-height:1.25;
  overflow-wrap:anywhere;
}

.fort-live strong {
  margin-top:.35rem;
  color:#67d7b5;
}

.fort-start,
.fort-game {
  padding:1.25rem;
}

.fort-start-grid,
.fort-status-grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1rem;
}

.fort-status-grid {
  grid-template-columns:repeat(6, minmax(0, 1fr));
  margin-bottom:1rem;
}

.fort-start label {
  display:block;
  min-width:0;
  margin:0;
  color:#e7f0f5;
  font-weight:700;
}

.fort-start select {
  width:100%;
  min-height:48px;
  margin-top:.45rem;
  padding:.7rem .8rem;
  border:1px solid rgba(255, 255, 255, .22);
  border-radius:8px;
  background:#f7fbff;
  color:#10202d;
}

.fort-primary,
.fort-actions button,
.fort-build-button,
.fort-selection button,
.fort-dialog-actions button {
  min-height:48px;
  border:1px solid rgba(255, 255, 255, .18);
  border-radius:8px;
  background:#0a84ff;
  color:#fff;
  font-weight:800;
  cursor:pointer;
}

.fort-primary {
  width:100%;
  margin-top:1rem;
  font-size:1.2rem;
}

.fort-primary:hover,
.fort-primary:focus,
.fort-actions button:hover,
.fort-actions button:focus,
.fort-build-button:hover,
.fort-build-button:focus,
.fort-selection button:hover,
.fort-selection button:focus,
.fort-dialog-actions button:hover,
.fort-dialog-actions button:focus {
  background:#006fe0;
}

.fort-status-grid div,
.fort-field-wrap,
.fort-controls,
.fort-log,
.fort-selection {
  border:1px solid rgba(255, 255, 255, .2);
  border-radius:8px;
  background:rgba(4, 10, 16, .58);
}

.fort-status-grid div {
  min-width:0;
  padding:.8rem;
}

.fort-layout {
  display:grid;
  grid-template-columns:minmax(0, 1fr) 280px;
  gap:1rem;
  align-items:start;
}

.fort-field-wrap {
  position:relative;
  overflow:hidden;
  background:#081018;
}

.fort-field {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:12 / 7;
  touch-action:manipulation;
  cursor:pointer;
}

.fort-controls {
  position:sticky;
  top:132px;
  padding:1rem;
  background:rgba(4, 10, 16, .78);
}

.fort-controls h2,
.fort-selection h2 {
  margin:0 0 .8rem;
  color:#fff;
  font-size:1.15rem;
}

.fort-build-list,
.fort-actions {
  display:grid;
  gap:.6rem;
}

.fort-build-button {
  display:grid;
  grid-template-columns:1fr auto;
  gap:.25rem .75rem;
  padding:.7rem .8rem;
  text-align:left;
  background:#22394d;
}

.fort-build-button span,
.fort-build-button small {
  min-width:0;
  overflow-wrap:anywhere;
}

.fort-build-button small {
  color:#d7e6ee;
  font-weight:700;
}

.fort-build-button strong {
  color:#67d7b5;
}

.fort-build-button.is-selected {
  border-color:#67d7b5;
  background:#145a43;
  box-shadow:0 0 0 4px rgba(103, 215, 181, .12);
}

.fort-actions {
  margin-top:1rem;
}

.fort-actions button[data-start-wave] {
  background:#145a43;
}

.fort-actions button[data-pause-game] {
  background:#3d5366;
}

.fort-actions button[data-fullscreen] {
  background:#0f5f73;
}

.fort-actions button[data-new-game] {
  background:#143d35;
}

.fort-actions button:disabled,
.fort-build-button:disabled,
.fort-selection button:disabled {
  cursor:not-allowed;
  opacity:.55;
}

.fort-selection {
  margin-top:1rem;
  padding:1rem;
}

.fort-selection p {
  margin:0;
  color:#dce9ef;
  font-weight:650;
}

.fort-selection dl {
  display:grid;
  grid-template-columns:1fr;
  gap:.45rem;
  margin:0 0 .8rem;
}

.fort-selection dl div {
  display:flex;
  justify-content:space-between;
  gap:.75rem;
  padding:.45rem .55rem;
  border:1px solid rgba(255, 255, 255, .1);
  border-radius:7px;
  background:rgba(255, 255, 255, .045);
}

.fort-selection dt {
  color:#d7e6ee;
}

.fort-selection dd {
  margin:0;
  color:#fff;
  font-weight:900;
}

.fort-selection button {
  width:100%;
  margin-top:.55rem;
  background:#145a43;
}

.fort-selection button[data-sell-unit] {
  background:#72512a;
}

.fort-log {
  margin-top:1rem;
  padding:1rem;
}

.fort-log ol {
  min-height:80px;
  max-height:150px;
  margin:0;
  padding-left:0;
  list-style:none;
  overflow:auto;
  color:#dce9ef;
}

.fort-log li + li {
  margin-top:.45rem;
}

.fort-log li {
  padding:.55rem .65rem;
  border:1px solid rgba(255, 255, 255, .12);
  border-radius:7px;
  background:rgba(255, 255, 255, .045);
}

.fort-dialog {
  position:fixed;
  inset:0;
  z-index:1100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
  background:rgba(3, 8, 12, .82);
}

.fort-dialog[hidden] {
  display:none;
}

.fort-dialog-panel {
  width:min(560px, 100%);
  padding:1.25rem;
  border:1px solid rgba(103, 215, 181, .52);
  border-radius:8px;
  background:linear-gradient(180deg, #12202a 0%, #0c151d 100%);
  color:#fff;
  box-shadow:0 22px 70px rgba(0, 0, 0, .36);
}

.fort-dialog-panel h2 {
  margin-bottom:.75rem;
  color:#67d7b5;
}

.fort-dialog-panel dl {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem;
  margin:1rem 0;
}

.fort-dialog-panel dl div {
  padding:.75rem;
  border:1px solid rgba(255, 255, 255, .16);
  border-radius:8px;
  background:rgba(255, 255, 255, .045);
}

.fort-dialog-panel dt {
  color:#d7e6ee;
  font-size:.9rem;
}

.fort-dialog-panel dd {
  margin:0;
  font-size:1.45rem;
  font-weight:900;
}

.fort-seo-text {
  margin:1.25rem;
  padding:1.25rem;
  border:1px solid rgba(255, 255, 255, .2);
  border-radius:8px;
  background:rgba(4, 10, 16, .52);
  color:#eef6f8;
}

.fort-seo-text h2 {
  margin-bottom:.75rem;
  color:#fff;
}

.fort-app:fullscreen {
  width:100vw;
  height:100vh;
  min-height:100vh;
  overflow:auto;
  background:#0e171f;
}

.fort-app.is-fullscreen .fort-hero {
  padding:.45rem .65rem;
}

.fort-app.is-fullscreen .fort-kicker,
.fort-app.is-fullscreen .fort-intro,
.fort-app.is-fullscreen .fort-seo-text,
.fort-app.is-fullscreen .fort-log {
  display:none;
}

.fort-app.is-fullscreen .fort-game {
  padding:.5rem;
}

@media (max-width:1100px) {
  .fort-layout {
    grid-template-columns:1fr;
  }

  .fort-controls {
    position:static;
  }
}

@media (max-width:760px) {
  body[data-page="fort-verdediging"] main {
    padding-right:.5rem;
    padding-left:.5rem;
  }

  .fort-hero {
    flex-direction:column;
  }

  .fort-live {
    flex:0 0 auto;
    min-width:0;
    width:100%;
    text-align:left;
  }

  .fort-start,
  .fort-game,
  .fort-hero {
    padding:.75rem;
  }

  .fort-start-grid,
  .fort-status-grid,
  .fort-dialog-panel dl {
    grid-template-columns:1fr;
  }

  .fort-field {
    aspect-ratio:1 / 1;
  }

  .fort-build-list {
    grid-template-columns:1fr;
  }

  .fort-actions {
    grid-template-columns:1fr 1fr;
  }

  .fort-actions button[data-fullscreen],
  .fort-actions button[data-new-game] {
    grid-column:1 / -1;
  }

  .fort-dialog {
    align-items:flex-start;
    padding:.75rem .75rem calc(5rem + env(safe-area-inset-bottom));
    overflow:auto;
  }
}

/* Rasterversie: breed speelveld, compacte bediening en geen pagina-scroll in fullscreen. */
.fort-build-list {
  max-height:360px;
  overflow:auto;
  padding-right:.2rem;
}

.fort-field {
  aspect-ratio:16 / 10;
}

.fort-field-wrap {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
}

.fort-app:fullscreen,
.fort-app.is-fullscreen {
  width:100vw;
  height:100vh;
  min-height:100vh;
  overflow:hidden;
  background:#0e171f;
}

.fort-app.is-fullscreen .fort-game {
  display:grid;
  grid-template-rows:auto minmax(0, 1fr);
  height:calc(100vh - 76px);
  padding:.45rem;
  overflow:hidden;
}

.fort-app.is-fullscreen .fort-status-grid {
    grid-template-columns:repeat(6, minmax(0, 1fr));
gap:.35rem;
  margin-bottom:.45rem;
}

.fort-app.is-fullscreen .fort-status-grid div {
  padding:.45rem .55rem;
}

.fort-app.is-fullscreen .fort-layout {
  grid-template-columns:minmax(0, 1fr) 300px;
  min-height:0;
  height:100%;
  align-items:stretch;
  overflow:hidden;
}

.fort-app.is-fullscreen .fort-field-wrap,
.fort-app.is-fullscreen .fort-controls {
  min-height:0;
  height:100%;
}

.fort-app.is-fullscreen .fort-field {
  width:100%;
  height:100%;
  object-fit:contain;
}

.fort-app.is-fullscreen .fort-controls {
  position:static;
  overflow:auto;
  padding:.75rem;
}

.fort-app.is-fullscreen .fort-build-list {
  max-height:28vh;
}

.fort-app.is-fullscreen .fort-build-button,
.fort-app.is-fullscreen .fort-actions button,
.fort-app.is-fullscreen .fort-selection button {
  min-height:42px;
}

.fort-app.is-fullscreen .fort-actions {
  margin-top:.65rem;
  gap:.45rem;
}

.fort-app.is-fullscreen .fort-selection {
  margin-top:.65rem;
  padding:.75rem;
}

@media (max-width:760px) {
  .fort-field {
    aspect-ratio:16 / 10;
  }

  .fort-build-list {
    max-height:none;
  }

  .fort-app.is-fullscreen .fort-game {
    height:calc(100vh - 58px);
  }

  .fort-app.is-fullscreen .fort-layout {
    grid-template-columns:1fr;
    grid-template-rows:minmax(0, 46vh) minmax(0, 1fr);
  }

  .fort-app.is-fullscreen .fort-controls {
    overflow:auto;
  }
}