/* Persoonlijke weergave-instellingen (zie ui/ui-scale.js) - schalen badges/
   iconen op de kaart en in de menubalk voor betere leesbaarheid, los van
   game-state en dus geldig over alle partijen heen (localStorage).
   --ui-scale: alleen de kleine badges (aantal/status/IPC).
   --unit-icon-scale: de unit-markers zelf (cirkel + icoon samen). */
:root {
  --ui-scale: 1;
  --unit-icon-scale: 1;
}

/* Pagina layout */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Merriweather", serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  color: rgba(255,255,255,0.8);
  /* Voorkomt de "pull-to-refresh"/rubber-band-bounce van de pagina zelf op
     mobiel wanneer een sleep op de kaart de rand van Leaflet's eigen pan-
     grenzen raakt - de kaart regelt haar eigen pan/zoom al via touch. */
  overscroll-behavior: none;
}

* {
    box-sizing: border-box;
  }

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  width: 100vw;
}


/* Kaart */
#map {
  width: 100vw;
  flex-grow: 1;
  z-index: 0;
}

/* Top bar layout - de belangrijkste balk van de UI (fasevoortgang + acties),
   vandaar de duidelijke elevatie (schaduw/gradient) en steviger padding om
   visueel "gewicht" te geven t.o.v. de rest van de interface. */
#top-bar {
    display: flex;
    align-items: center;
    gap: 1rem;

    padding: 0.7rem 1.25rem;
    background: linear-gradient(to bottom, #292929, #1c1c1c);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    position: relative;
    z-index: 20;
  }

  #top-bar .top-bar-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  /* Scheidingslijntje tussen logische groepen (ronde / machten / fase) -
     minimalistisch i.p.v. drukke kaders. */
  .top-bar-divider {
    width: 1px;
    height: 1.6rem;
    background: rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
  }

  /* Duwt de actieknoppen naar rechts, los van de status-info links. */
  .top-bar-spacer {
    flex-grow: 1;
  }

  .top-bar-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.55;
  }

  #round-display {
    font-size: 0.95rem;
    white-space: nowrap;
  }

  #round-number {
    font-weight: 700;
    color: #fff;
  }

  .short-game-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(233, 141, 141);
    border: 1px solid rgba(233, 141, 141, 0.5);
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
  }

  .short-game-badge.hidden {
    display: none;
  }

  /* Powers */
  #powers-display {
    justify-content: center;
    flex-wrap: wrap;
  }

  #powers-display img {
    height: 36px;

    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
    filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
    opacity: 0.4;
    transition: opacity 0.15s ease, filter 0.15s ease;
}

  /* Geselecteerde power (wordt via JS een class gegeven) */
  #powers-display img.selected {
    -webkit-filter: grayscale(0);
    filter: none;
    opacity: 1;
  }

  .power-icon-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }

  /* Inkomen/IPC nu als één "pill" ONDER de vlag i.p.v. twee losse badges -
     de gedeelde achtergrond/omlijning maakt duidelijk dat het één geheel is
     dat bij het icoon erboven hoort, met inkomen (links) en totaal (rechts)
     als de twee helften van diezelfde pil, gescheiden door een dun lijntje. */
  .power-stats {
    display: flex;
    align-items: stretch;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    overflow: hidden;
    transform: scale(var(--ui-scale));
  }

  .power-stat {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 1px 5px;
    font-size: 0.62rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .power-stat .material-symbols-outlined {
    font-size: 12px;
  }

  .power-stat-income {
    color: rgb(130, 200, 140);
    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }

  .power-stat-ipc {
    color: rgb(219, 164, 0);
  }

  .gap {
    flex-grow: 2;
  }

  /* Fase: de huidige status - subtiel geaccentueerd zodat je in één blik
     ziet waar je in de beurt zit, zonder dat het een drukke badge wordt. */
  #phase-display span {
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgb(233, 179, 88);
    white-space: nowrap;
  }

  /* Actieknoppen (undo/redo/end phase) - los groepje, met wat lucht
     tussen de knoppen zelf. */
  .top-bar-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  /* Gedeelde, minimalistische iconknop-stijl: undo/redo/menu. */
  .icon-button {
    border: none;
    background: transparent;
    color: #f5f5f5;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }

  .icon-button .material-symbols-outlined {
    font-size: 20px;
  }

  .icon-button:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .icon-button:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
  }

  /* End Phase: de primaire actie van de balk - een duidelijke, gevulde pil
     i.p.v. een los icoontje, zodat hij ook echt als hoofdactie voelt. */
  .end-phase-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: none;
    border-radius: 999px;
    background: rgb(150, 30, 45);
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    padding: 0.55rem 1.1rem;
    margin-left: 0.35rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, transform 0.1s ease;
  }

  .end-phase-button .material-symbols-outlined {
    font-size: 18px;
  }

  .end-phase-button:hover {
    background: rgb(180, 40, 58);
  }

  .end-phase-button:active {
    transform: scale(0.96);
  }

  /* Volgende zet: zelfde vorm als End Phase, maar een neutrale (niet-rode)
     kleur - dit is een toekijk-actie, geen "mijn beurt"-actie. */
  .ai-step-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: none;
    border-radius: 999px;
    background: rgb(70, 105, 150);
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    padding: 0.55rem 1.1rem;
    margin-left: 0.35rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, transform 0.1s ease;
  }

  .ai-step-button .material-symbols-outlined {
    font-size: 18px;
  }

  .ai-step-button:hover {
    background: rgb(90, 130, 180);
  }

  .ai-step-button:active {
    transform: scale(0.96);
  }

  .hidden {
    display: none !important;
  }

  /* AI-beurt: de speler kijkt toe maar mag niet ingrijpen - kaart en
     onderste panelen worden non-interactief (zie ui/map/map-ui.js render()),
     de top-bar (menu, Next move) blijft wel gewoon bruikbaar. */
  .ai-turn-lock #bottomMenu {
    pointer-events: none;
  }

  /* #map krijgt BEWUST geen filter (zoals #bottomMenu hierboven): een CSS
     filter dwingt de browser om het gefilterde element in een eigen
     offscreen compositing-laag te renderen, en Leaflet's markers/labels
     daaronder worden gepositioneerd via CSS transform op eigen panes - de
     combinatie daarvan is een bekende bron van precies het bug-patroon
     "markers/iconen verdwijnen soms tot je scrolt/pant" (het pannen dwingt
     Leaflet alle marker-transforms opnieuw te zetten, wat de laag alsnog
     goed laat samenstellen). Vandaar hier een gewone, niet-filterende
     overlay-div (zie .map-ai-lock-overlay, kind van #map in index.html) die
     visueel hetzelfde "gedimd"-effect geeft zonder ooit filter/transform op
     de Leaflet-container zelf te zetten. */
  .ai-turn-lock #map {
    pointer-events: none;
  }

  /* Geen visuele verduistering meer tijdens een AI-beurt (op nadrukkelijk
     verzoek) - deze overlay-div blijft bewust bestaan (zie index.html) en
     #map houdt zijn pointer-events:none hierboven, alleen het gedimde
     uiterlijk zelf is uitgeschakeld. */
  .map-ai-lock-overlay {
    position: absolute;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
  }

  /* Uitzondering: het in/uitklap-knopje van het onderste paneel blijft altijd
     klikbaar, ook tijdens een AI-beurt - de speler mag best meekijken naar
     wat de AI koopt/mobiliseert/bevecht, zolang hij het niet kan aanpassen. */
  .ai-turn-lock #bottomMenuHandle {
    pointer-events: auto;
  }

  /* Menu-paneel (dropdown onder het menu-icoontje) */
  .menu-panel {
    position: fixed;
    top: 62px;
    right: 1rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background-color: #212121;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    min-width: 160px;
  }

  .menu-panel-button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    background: transparent;
    color: #f5f5f5;
    font-family: inherit;
    font-size: 0.9rem;
    text-align: left;
    padding: 0.6rem 1rem;
    cursor: pointer;
  }

  .menu-panel-button .material-symbols-outlined {
    font-size: 18px;
  }

  /* Doorklikken/doorspelen: dezelfde rij-vorm als de andere menu-items, met
     een echte aan/uit-schuifknop i.p.v. tekst-knop. */
  .menu-panel-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
  }

  .menu-panel-toggle-row:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  .menu-panel-toggle-label {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .menu-panel-toggle-label .material-symbols-outlined {
    font-size: 18px;
  }

  /* Icon size-slider - zelfde rij-vorm als de andere menu-items. */
  .menu-panel-slider-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
  }

  .menu-panel-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    cursor: pointer;
    flex-shrink: 0;
  }

  .menu-panel-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgb(233, 141, 141);
    cursor: pointer;
  }

  .menu-panel-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: none;
    border-radius: 50%;
    background: rgb(233, 141, 141);
    cursor: pointer;
  }

  .switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
  }

  .switch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    /* Bewust een volwaardig, onzichtbaar element over de hele schuifknop
       i.p.v. width/height:0 - sommige mobiele browsers (met name oudere
       iOS Safari-versies) activeren een 0x0-formulierelement niet altijd
       betrouwbaar via zijn <label>, ook al werkt dat op desktop wel. */
  }

  .switch-slider {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    transition: background-color 0.15s ease;
  }

  .switch-slider::before {
    content: "";
    position: absolute;
    height: 14px;
    width: 14px;
    left: 3px;
    top: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.15s ease;
  }

  .switch input:checked + .switch-slider {
    background-color: rgb(233, 141, 141);
  }

  .switch input:checked + .switch-slider::before {
    transform: translateX(16px);
  }

  .switch input:focus-visible + .switch-slider {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
  }

  .menu-panel-button:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  .menu-panel-gameid {
    padding: 0.5rem 1rem 0.6rem;
    font-size: 0.65rem;
    opacity: 0.5;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    word-break: break-all;
  }

  /* Modal (Log-popup) */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Hoger dan .main-menu (z-index: 3000) - #saveGameModal/#loadGameModal
       (zie ui/saves.js) moeten ook bovenop het hoofdmenu kunnen verschijnen. */
    z-index: 3500;
  }

  .modal-box {
    background-color: #212121;
    color: #f5f5f5;
    width: min(600px, 90vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  }

  .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: bold;
  }

  .modal-close {
    border: none;
    background: transparent;
    color: #f5f5f5;
    cursor: pointer;
    padding: 0.25rem;
  }

  .modal-close:hover {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
  }

  .modal-content {
    padding: 1rem;
    overflow-y: auto;
  }

  .log-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .log-entry {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.4rem 0;
    font-size: 0.85rem;
    cursor: pointer;
  }

  .log-entry:hover {
    background: rgba(255, 255, 255, 0.06);
  }

  .log-entry-raw {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-word;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 0.5rem;
  }

  .log-entry-index {
    opacity: 0.5;
    min-width: 2.2em;
  }

  .log-entry-power {
    color: black;
    font-weight: bold;
    font-size: 0.75rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    white-space: nowrap;
  }

  .log-entry-text {
    flex: 1;
  }

  .log-entry-time {
    opacity: 0.6;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  .log-empty {
    opacity: 0.6;
    text-align: center;
    padding: 1rem;
  }

#bottomMenu {
  background-color: #212121d8;
  backdrop-filter: blur(6px);
  bottom: 10px;
  position: fixed;
  left: 10px;
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: 10px;
  /* Houdt de afgeronde hoeken/onderkant altijd strak en op precies dezelfde
     plek (bottom:10px blijft ALTIJD de positie, in-/uitgeklapt of niet) - zie
     de in-/uitklap-regel hieronder, die nu de HOOGTE laat krimpen i.p.v. het
     hele paneel van het scherm af te schuiven. */
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  max-width: min(420px, calc(100vw - 20px));
  /* Zonder dit groeit het paneel (bv. de purchase-tabel) op een kort scherm
     gewoon voorbij de bovenkant van het venster, onbereikbaar - de content
     hieronder (.info) scrollt zelf binnen wat er overblijft, de handle blijft
     zichtbaar. */
  max-height: min(600px, calc(100vh - 150px));

  transition: max-height 0.3s ease, opacity 0.2s ease;
}

/* Het battle-paneel heeft van nature veel meer inhoud (2 kolommen units +
   dobbelstenen-kolom) dan de andere onderin-schermen (aankopen/mobilisatie),
   die prima passen in de normale 420px. Bij veel eenheden perste die cap de
   casualty-bolletjes tot een lange, smalle kolom in elkaar (geen marges
   meer, bolletjes tegen elkaar aan). Alleen verruimen zolang er ook echt een
   .battle-view in zit; op een smal scherm blijft calc(100vw - 20px) toch de
   kleinere (dus bepalende) kant van de min() - vandaar geen aparte
   .mobile-layout-regel nodig. */
#bottomMenu:has(.battle-view) {
  max-width: min(1180px, calc(100vw - 20px));
}

#bottomMenuHandle {
  margin-bottom: 10px;
}

#bottomMenuHandle span {
  float: right;
  transition: transform 0.3s ease;
}

#bottomMenuHandle span:hover {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  cursor: pointer;
}

#bottomMenu:has(#bottomMenuToggle:checked) {
  /* Vouwt samen tot alleen de handle-balk (padding + het 24px icoon), i.p.v.
     het hele paneel bijna van het scherm af te laten schuiven - de vaste,
     afgeronde onderkant blijft zo altijd zichtbaar op dezelfde plek, in
     plaats van tijdelijk buiten beeld te "glijden". */
  max-height: 50px;
}

#bottomMenu:has(#bottomMenuToggle:checked) #bottomMenuHandle span {
  transform: rotate(180deg);
}

/* Niets te doen (geen aankopen/mobilisatie/cargo/battle) - de hele balk
   (inclusief het in/uitklap-knopje) onopvallend laten verdwijnen i.p.v. een
   lege, functieloze balk te laten hangen. Bewust geen display:none (dat kan
   niet animeren) - opacity/pointer-events zorgen dat hij ook echt niet meer
   klikbaar is terwijl hij wegfadet. */
#bottomMenu.bottom-menu-empty {
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}

.info {
  flex-grow: 1;
  overflow-y: auto;
  min-height: 0; /* laat dit flex-item ook echt krimpen/scrollen i.p.v. de handle omhoog te duwen */
  -webkit-overflow-scrolling: touch;
}

/* Horizontale scroll-vangnet, zodat de tabel op smalle schermen nooit de
   layout breekt in plaats van onleesbaar samen te persen. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.purchase-table {
    width: 100%;
    min-width: 360px;
    border-collapse: collapse;
    text-align: center;
    font-size: 0.85rem;
}

.purchase-table thead th {
    padding: 6px 8px;
    opacity: 0.6;
    font-weight: 600;
    font-size: 0.75rem;
}

.purchase-table thead .material-symbols-outlined {
    font-size: 1.1rem;
    vertical-align: middle;
}

.purchase-table tbody tr {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    transition: background-color 0.15s ease;
}

.purchase-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.purchase-table td {
    padding: 8px;
}

.purchase-table tr > td:first-child {
    text-align: left;
}

.unit-name-cell {
    font-weight: 600;
}

.purchase-table tfoot tr {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.total-cost-label {
    text-align: right;
    font-weight: 700;
    padding: 10px 8px;
}

.total-cost-value {
    text-align: center;
    font-weight: 700;
    color: rgb(233, 141, 141);
}

/* Visuele hint: deze unit kan met het resterende budget niet meer gekocht
   worden (zie ui/purchases.js updateTotal()). */
.purchase-table tbody tr.purchase-row-unaffordable {
    color: rgb(220, 90, 90);
    opacity: 0.55;
}

.purchase-table tbody tr.purchase-row-unaffordable .qty-stepper {
    opacity: 0.7;
}

/* Aantal-stepper: min-knop / invoerveld / plus-knop.
   Grote, duimvriendelijke tapgebieden voor mobiel & tablet. */
.qty-stepper {
    display: inline-flex;
    align-items: stretch;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    margin: 0 auto;
}

.qty-step {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    width: 34px;
    min-height: 34px;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color 0.15s ease;
}

.qty-step:hover {
    background: rgba(255, 255, 255, 0.12);
}

.qty-step:active {
    background: rgba(255, 255, 255, 0.2);
}

.purchase-qty-input {
    /* Minimaal 16px voorkomt dat iOS Safari inzoomt bij focus. */
    font-size: 16px;
    text-align: center;
    background: none;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    color: rgb(233, 141, 141);
    font-weight: 700;
    width: 2.6em;
    min-height: 34px;
    padding: 0;
    -moz-appearance: textfield;
    appearance: textfield;
}

.purchase-qty-input::-webkit-outer-spin-button,
.purchase-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.purchase-qty-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
}

.mobilize-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
}

.mobilize-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.mobilize-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.mobilize-item:active {
    transform: scale(0.98);
}

.mobilize-item.select {
    background: rgba(233, 141, 141, 0.22);
    border-color: rgb(233, 141, 141);
}

.mobilize-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    padding: 3px;
    flex-shrink: 0;
}

.mobilize-item-name {
    flex-grow: 1;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: left;
}

.mobilize-item-count {
    font-weight: 700;
    font-size: 0.9rem;
    color: rgb(233, 141, 141);
    background: rgba(0, 0, 0, 0.25);
    border-radius: 999px;
    min-width: 1.8em;
    padding: 2px 8px;
    text-align: center;
}

.cargo-title {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    opacity: 0.75;
    padding: 10px 10px 4px;
}

.cargo-list {
    padding: 0 10px 10px;
}

.cargo-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.cargo-row:hover {
    background: rgba(215, 111, 111, 0.15);
}

.cargo-row.select {
    background: rgba(241, 126, 126, 0.577);
    font-weight: bold;
}

.territory-label-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    text-align: center;
    translate: -50% -50%;
}

.ipcValue {
    border: 0.5px white solid;
    border-radius: 50%;
    font-size: 0.8em;
    font-weight: bold;
    width: calc(1.6em - 1px);
    height: calc(1.6em - 1px);
}

.currentControllerImage > img {
    height: 20px;
}

.industrialComplex > img {
  height: 22px;
  position: relative;
  top: -9px;
}

.capital-marker-wrapper {
    /* GEEN translate(-50%,-50%) hier - dat zou ster+label als geheel op het
       punt centreren, waardoor de ster zelf ernaast komt te staan zodra er
       een label bij zit. Leaflet plaatst deze div (zonder eigen iconAnchor)
       met haar (0,0) precies op de opgegeven coördinaat - .capital-marker-
       icon hieronder centreert zichzelf op dat (0,0), los van het label. */
    pointer-events: none;
}

.capital-marker {
    position: relative;
}

.capital-marker-icon {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    font-size: 14px;
    color: rgb(255, 215, 0);
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.6);
}

.capital-marker-label {
    position: absolute;
    left: 8px;
    top: 0;
    transform: translateY(-50%);
    white-space: nowrap;
    font-size: 0.7em;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.6);
}

/* De draaiende ring */
.unit-marker-wrapper.selected-unit-marker::after {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    width: 36px;          /* afstand tot marker bepalen */
    height: 36px;
    transform: rotate(0deg);
    border-radius: 50%;
    border: 2px dashed rgba(0, 255, 0, 0.9);
    
    /* De ring zit een stukje buiten de marker */
    padding: 2px;

    /* De animatie */
    animation: rotateRing 8s linear infinite;
    pointer-events: none; /* ring moet niet klikbaar zijn */
}

/* Rotatie-animatie */
@keyframes rotateRing {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
  
.unit-marker {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;   /* stem af op jouw svg-icoon */
    height: 36px;
    border-radius: 50%;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
    transform: scale(var(--unit-icon-scale));
}


.unit-marker img.unit-icon {
    /* Bewust position:absolute i.p.v. gewoon width/height op een flex-child:
       een <img> als flex-item met width/height in procenten bleek de eigen
       intrinsieke beeldverhouding te laten meewegen in Flexbox' eigen
       sizing-algoritme (flex-basis:auto), waardoor schepen (extreem breed/
       plat brongebied, bv. 289x36) veel groter uitpakten dan de opgegeven
       procenten - soms zelfs breder dan de marker zelf.
       .unit-marker is en blijft 36x36px (zie hierboven), dus 80% daarvan is
       gewoon 28.8px - vaste pixelwaarden i.p.v. procenten laten geen
       ambiguïteit over. */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    object-fit: contain;
    /* !important is hier geen stijlkeuze maar noodzaak: Leaflet's eigen CSS
       (leaflet.css) bevat ".leaflet-container .leaflet-marker-pane img
       { max-width/max-height: none !important }" om te voorkomen dat een
       host-pagina met een "img { max-width:100% }"-reset kaarttegels kapot
       maakt. Die selector heeft specificiteit (0,2,1) (2 classes + een
       element-selector) - vandaar ook hier ".unit-marker img.unit-icon"
       i.p.v. gewoon ".unit-icon", en niet zomaar ".unit-marker .unit-icon":
       zonder de "img"-kwalificatie zou onze regel op specificiteit (0,2,0)
       bij een !important-vs-!important-conflict alsnog verliezen. */
    max-width: 29px !important;
    max-height: 29px !important;
}

/* Schepen hebben een extreem brede/platte bron-tekening (bv. een transport
   is ~8x zo breed als hoog) - met dezelfde 28.8x28.8px box als land/lucht-
   eenheden zou het silhouet nauwelijks nog zichtbaar zijn (object-fit:
   contain zou 'm dan tot een dun streepje van een paar pixels verkleinen).
   Iets meer breedte toestaan houdt het schip herkenbaar, en steekt toch
   duidelijk minder buiten de cirkel uit dan voorheen (zonder object-fit
   werd het beeld gewoon uitgerekt tot ver buiten de marker). */
.unit-marker img.unit-icon-ship {
    max-width: 54px !important;
    max-height: 20px !important;
    /* Iets lager dan het midden (i.p.v. de -50%/-50% van .unit-icon hierboven),
       zodat de lettercode erboven (.unit-icon-ship-label) meer ruimte krijgt -
       alleen voor schepen, andere eenheden blijven gecentreerd. */
    transform: translate(-50%, calc(-50% + 4px));
}

/* Lettercode (T/S/AC/...) boven het scheepsicoon, nog wel binnen de cirkel -
   zie map-units.js's SHIP_LABELS. */
.unit-marker .unit-icon-ship-label {
    position: absolute;
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #fff;
    /* text-shadow: 0 0 2px rgba(0, 0, 0, 0.9), 0 0 3px rgba(0, 0, 0, 0.7); */
    pointer-events: none;
}

/* Lettercode in dezelfde kleur als het scheepsicoon zelf (elk icon.svg
   gebruikt een vaste, powerspecifieke fill-kleur) i.p.v. wit, zodat label en
   silhouet als één geheel ogen. */
.unit-power-GERMANY .unit-icon-ship-label { color: #434443; }
.unit-power-JAPAN .unit-icon-ship-label { color: #ca6042; }
.unit-power-UNITED_KINGDOM .unit-icon-ship-label { color: #b28f5f; }
.unit-power-UNITED_STATES .unit-icon-ship-label { color: #5d8147; }
.unit-power-SOVIET_UNION .unit-icon-ship-label { color: #5c222a; }

.unit-marker .unit-badge {
    position: absolute;
    right: -3px;   /* iets buiten het icoon voor mooi effect */
    bottom: -3px;
    min-width: 12px;
    height: 12px;
    padding: 0 3px;
    border-radius: 6px;
    background: rgb(219, 164, 0);
    color: black;
    font-size: 9px;
    font-weight: bold;
    line-height: 12px;
    text-align: center;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
    transform: scale(var(--ui-scale));
}

/* Statusbadge linksonder: kan nog verder blitzen, of moet nog landen. */
.unit-marker .unit-status-badge {
    position: absolute;
    left: -3px;
    bottom: -3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
    transform: scale(var(--ui-scale));
}

.unit-marker .unit-status-badge .material-symbols-outlined {
    font-size: 11px;
    font-weight: bold;
}

.unit-status-badge-blitz {
    background: rgb(88, 214, 88);
}

.unit-status-badge-land {
    background: rgb(233, 179, 88);
}

/* Tweede statusbadge rechtsboven: onafhankelijk van de badge linksonder
   hierboven (cargo aan boord van een transport, of fighters die aan boord
   staan van een carrier). */
.unit-status-badge-cargo,
.unit-status-badge-docked {
    left: auto;
    right: -3px;
    bottom: auto;
    top: -3px;
}

.unit-status-badge-cargo {
    width: auto;
    min-width: 14px;
    padding: 0 2px;
    border-radius: 7px;
    background: rgb(120, 170, 230);
    font-size: 8px;
    font-weight: bold;
}

.unit-status-badge-docked {
    background: rgb(180, 180, 180);
}

.unit-power-GERMANY {
    background-color: #a9aed0;
}

.unit-power-JAPAN {
    background-color: rgb(251, 184, 150);
}

.unit-power-UNITED_KINGDOM {
    background-color: #ffedba;
}

.unit-power-UNITED_STATES {
    background-color: #7a9e7a;
}

.unit-power-SOVIET_UNION {
    background-color: #d1586a;
}

/* Lijn van de gebogen pijl (evt. extra styling bovenop Leaflet opties) */


/* Lijn van de gebogen pijl */
.bezier-arrow-line {
  stroke-linecap: round;
}

/* Buitenste container: Leaflet verplaatst deze */
.bezier-arrow-head {
  width: 16px;
  height: 16px;
  /* Leaflet zet hier zelf transform: translate3d(...) op */
}

/* Innerlijke driehoek (de echte pijlpunt) */
.bezier-arrow-head-inner {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 14px solid #3388ff; /* zelfde kleur als de lijn */

  /* Roteren rond de basis van de driehoek (onderkant) */
  transform-origin: 50% 50%;
}


.battle-title {
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 10px;
}

.battle-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.battle-meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}

.battle-meta-badge .material-symbols-outlined {
  font-size: 14px;
}

.battle-meta-badge-surprise {
  background: rgba(233, 179, 88, 0.22);
  color: rgb(233, 179, 88);
}

.battle-meta-badge-amphibious {
  background: rgba(120, 170, 230, 0.22);
  color: rgb(120, 170, 230);
}

/* Meldingen bij geweigerde acties (zie ui/toast.js) */
.toast-container {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 3500;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 8px;
  max-width: min(340px, calc(100vw - 2rem));
  pointer-events: none;
}

.toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  background-color: #212121;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.toast-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.toast.toast-leaving {
  opacity: 0;
  transform: translateX(16px) scale(0.98);
}

.toast-icon {
  flex-shrink: 0;
  font-size: 18px;
  color: rgb(214, 96, 96);
  margin-top: 1px;
}

.toast-text {
  flex-grow: 1;
  font-size: 0.8rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
  word-break: break-word;
}

.toast-close {
  flex-shrink: 0;
  align-self: flex-start;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  padding: 0;
  display: flex;
}

.toast-close:hover {
  color: rgba(255, 255, 255, 0.85);
}

.toast-close .material-symbols-outlined {
  font-size: 15px;
}

.toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: rgba(214, 96, 96, 0.55);
  animation: toast-shrink linear forwards;
}

@keyframes toast-shrink {
  from { width: 100%; }
  to { width: 0%; }
}

/* Mobiel/smal-scherm: zie de grote toelichting onderaan dit bestand bij
   ".mobile-layout" - deze klasse wordt door ui/layout-mode.js gezet, zowel
   automatisch (op basis van de vensterbreedte) als via de handmatige
   mobiel/desktop-schakelaar in het menu. Bewust GEEN @media hier: zo hoeft
   elke regel maar op één plek te bestaan. */
.mobile-layout .toast-container {
  left: 1rem;
  right: 1rem;
  max-width: none;
}

/* AI-beurt samenvatting (zie ui/splash.js) - hergebruikt .modal-overlay/
   .modal-box/.modal-header/.modal-content van het Log-popup. */
.splash-box {
  position: relative;
  overflow: hidden;
  width: min(420px, 90vw);
}

.splash-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.splash-power-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  padding: 2px;
}

.splash-section + .splash-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.splash-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.55;
  margin-bottom: 6px;
}

.splash-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.85rem;
}

.splash-row:last-child {
  border-bottom: none;
}

.splash-row-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.splash-row-label {
  flex: 1;
}

.splash-row-value {
  font-weight: 700;
  opacity: 0.85;
  white-space: nowrap;
}

.splash-row-total {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-weight: 700;
}

.splash-empty {
  text-align: center;
  opacity: 0.6;
  font-size: 0.85rem;
  padding: 1rem 0;
}

.splash-income-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 0.85rem 0 0.25rem;
}

.splash-income-summary .material-symbols-outlined {
  font-size: 18px;
  opacity: 0.6;
}

.splash-income-delta-positive {
  color: rgb(130, 200, 140);
}

.splash-income-delta-negative {
  color: rgb(220, 120, 120);
}

.splash-footer {
  display: flex;
  justify-content: center;
  padding: 0 1rem 1rem;
}

.splash-continue-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  border-radius: 999px;
  background: rgb(233, 141, 141);
  color: #1c1c1c;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  padding: 0.55rem 1.4rem;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.splash-continue-button .material-symbols-outlined {
  font-size: 16px;
}

.splash-continue-button:hover {
  background: rgb(240, 165, 165);
}

.splash-continue-button:active {
  transform: scale(0.96);
}

.splash-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: rgba(233, 141, 141, 0.55);
}

.battle-view {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 18px;
}

.retreat-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  font-weight: 600;
  text-align: center;
  opacity: 0.9;
}

.submarine-choice-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 1.5rem 1rem;
}

.submarine-choice-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.submarine-choice-title {
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  opacity: 0.9;
}

.battle-col-L, .battle-col-R {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  min-width: 0;
}

.battle-col-L .unit-tokens {
  justify-content: flex-end;
}

.battle-col-R .unit-tokens {
  justify-content: flex-start;
}

/* Header met vlagicoon(en) + naam bovenaan elke kolom */
.battle-side-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.battle-side-icons {
  display: flex;
  flex-shrink: 0;
}

.battle-side-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  object-fit: contain;
  padding: 2px;
}

.battle-side-icon + .battle-side-icon {
  margin-left: -8px;
}

.battle-side-name {
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Unit type rijen */
.unit-type-row {
  display: flex;
  /* flex-start i.p.v. center: bij veel eenheden van 1 type wrapt
     .unit-tokens naar meerdere regels, en wordt de rij dus veel hoger dan
     het (1-regelige) label/hits-cell ernaast - center zou die dan ergens
     halverwege de bolletjes laten "zweven" i.p.v. nette uitlijning met de
     eerste regel bolletjes. */
  align-items: flex-start;
  gap: 10px;
  min-height: 26px;
  padding: 3px 0;
}

.unit-type-label, .unit-hits-cell {
  /* Optisch uitlijnen met het MIDDEN van de eerste regel bolletjes
     (.unit-token is 18px hoog) nu de rij zelf flex-start gebruikt. */
  padding-top: 2px;
}

.active-unit {
  background-color: rgba(255,255,255,0.3);
}

.unit-type-label {
  /* Breed genoeg om de langste naam ("Aircraft Carrier") altijd volledig,
     op 1 regel, naast de attack/defense-waarde te tonen - op desktop willen
     we geen ellipsis (zie .unit-type-name hieronder). GEEN flex-shrink:0:
     op mobiel (.mobile-layout, smallere battle-kolom) moet dit label nog
     wel kunnen krimpen. */
  width: 185px;
  min-width: 0;
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  opacity: 0.9;
}

.unit-type-name {
  font-weight: 600;
  /* Altijd volledig uitgeschreven op desktop (bewust geen ellipsis) - het
     label hierboven is al breed genoeg voor "Aircraft Carrier". Alleen
     white-space:nowrap blijft nodig om te voorkomen dat de naam naar een 2e
     regel wrapt, wat de hele rij (en de tokens ervoor/erna) hoger en scheef
     zou maken t.o.v. andere rijen. */
  white-space: nowrap;
  min-width: 0;
  flex-shrink: 1;
}

/* Op mobiel (smallere battle-kolom, zie .mobile-layout hierboven/elders)
   past "Aircraft Carrier" niet altijd meer op 1 regel binnen de beschikbare
   ruimte - daar wél liever een ellipsis dan een andere rij-hoogte. */
.mobile-layout .unit-type-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.unit-type-stat {
  opacity: 0.65;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

/* De tokens rechts van het label - flex:1 (i.p.v. een vaste %) zodat ze ALLE
   ruimte krijgen die het label en de hits-kolom op deze rij overlaten. Bij
   veel eenheden (10+) van hetzelfde type geeft dat, samen met flex-wrap, een
   compacte meerdere-kolommen-brede grid van bolletjes i.p.v. de vroegere
   ene lange, smalle kolom (zie #bottomMenu:has(.battle-view) hierboven voor
   de bijbehorende breedte-verruiming van het hele paneel). */
.unit-tokens {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-content: flex-start;
  flex: 1 1 0;
  min-width: 0;
}

.unit-token {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.35);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.selectable-token:hover {
  outline: none;
  transform: scale(1.2);
  cursor: pointer;
}

.selected-casualty {
  background: #e0454c !important;
  border-color: #e0454c !important;
}

/* Een battleship die deze ronde al 2x als casualty gekozen is (zie
   handleCasualtyTokenClick in ui/battle.js) - moet duidelijk anders ogen dan
   de normale 1-hit .selected-casualty, anders lijkt de 2e klik niets te
   doen. */
.selected-casualty-double {
  background: #7d1216 !important;
  border: 2px solid #ffd166 !important;
}

.selected-casualty-double::after {
  content: "×2";
  position: absolute;
  bottom: -6px;
  right: -7px;
  min-width: 13px;
  padding: 0 2px;
  border-radius: 6px;
  background: #ffd166;
  color: #1c1c1c;
  font-size: 8px;
  font-weight: 800;
  line-height: 12px;
  text-align: center;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* Battleship die deze battle al 1 hit heeft gehad ("op zijn zij" - rulebook
   blz. 25) - nog niet vernietigd, maar een volgende hit is al genoeg. */
.unit-token-damaged {
  background: rgba(233, 179, 88, 0.5);
  border-color: rgb(233, 179, 88);
}

.unit-token-damaged::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px dashed rgb(233, 179, 88);
}

/* Klein vlaggetje in de hoek van een casualty-bolletje - alleen toegevoegd
   (zie ui/battle.js) zolang deze battle-zijde uit MEERDERE landen bestaat
   (bv. een gezamenlijke coalitie-verdediging), zodat je per bolletje ziet
   van welk land die eenheid daadwerkelijk is. */
.unit-token-owner-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.6);
  object-fit: contain;
  pointer-events: none;
}

/* Scheidingslijntje tussen verschillende krachten */
.unit-power-separator {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 4px 0;
}


/* Middenkolom met dobbelstenen */
.battle-center {
  width: 130px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
}

.dice-side {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.dice-label {
  font-size: 0.75rem;
  opacity: 0.7;
}

.dice-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

.die {
  width: 24px;
  height: 24px;
  background: white;
  color: black;
  border-radius: 4px;
  border: 1px solid #888;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/* Hits-tekst onder de dobbelstenen */
.hits-side {
  font-size: 0.75rem;
  text-align: center;
  padding: 8px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}

.hits-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.6;
  margin-bottom: 4px;
}

.attacker-hits, .defender-hits {
  opacity: 0.9;
}

/* Knoppen (roll dice / assign casualties / retreat / press attack) */
.battle-roll-button {
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  color: #f5f5f5;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.battle-roll-button:hover {
  background: rgba(255, 255, 255, 0.18);
}

.battle-roll-button:active {
  transform: scale(0.96);
}


.unit-dice-cell {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 0 4px;
}

/* Extra kolom: aantal hits per unit-type */
.unit-hits-cell {
  width: 40px;
  text-align: center;
  font-size: 0.75rem;
  opacity: 0.9;
  visibility: hidden;
}


/* DOBBELSTENEN */
.dice {
  position: relative;
  width: 50px;
  height: 50px;
  transform-style: preserve-3d;
  transition: transform 1s; 
}

.dot {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 2.5px 2.5px -5px;
  border-radius: 50%;
  background-color: #f25f5c;
  box-shadow: inset 1px 1px #d90429;
}

.side {
  position: absolute;
  background-color: #fff;
  border-radius: 3px;
  width: 50px;
  height: 50px;
  border: 1px solid #e5e5e5;
  text-align: center;
  line-height: 1em;
}

/* Halve Z-distance */
.side:nth-child(1) {
  transform: translateZ(1.55em); }

.side:nth-child(6) {
  transform: rotateY(90deg) translateZ(1.55em); }

.side:nth-child(3) {
  transform: rotateY(-90deg) translateZ(1.55em); }

.side:nth-child(4) {
  transform: rotateX(90deg) translateZ(1.55em); }

.side:nth-child(5) {
  transform: rotateX(-90deg) translateZ(1.55em); }

.side:nth-child(2) {
  transform: rotateY(-180deg) translateZ(1.55em); }

/* Rotatieklassen blijven hetzelfde */
.show-1 { transform: rotateX(720deg) rotateZ(-720deg); }
.show-6 { transform: rotateX(-900deg) rotateZ(1080deg); }
.show-3 { transform: rotateY(-450deg) rotateZ(-1440deg); }
.show-4 { transform: rotateY(810deg) rotateZ(720deg); }
.show-5 { transform: rotateX(-810deg) rotateZ(-1080deg); }
.show-2 { transform: rotateX(450deg) rotateZ(-720deg); }

/* Dot posities blijven percentages → onveranderd */
.two-1, .three-1, .four-1, .five-1, .six-1 {
  top: 20%;
  left: 20%;
}

.four-3, .five-3, .six-4 {
  top: 20%;
  left: 80%; 
}

.one-1, .three-2, .five-5 {
  top: 50%;
  left: 50%;
}

.four-2, .five-2, .six-3 {
  top: 80%;
  left: 20%; 
}

.two-2, .three-3, .four-4, .five-4, .six-6 {
  top: 80%;
  left: 80%; 
}

.six-2 {
  top: 50%;
  left: 20%;
}

.six-5 {
  top: 50%;
  left: 80%;
}

.roll-hit {
  color: rgb(88, 214, 88);
  font-weight: 600;
}

.roll-miss {
  color: rgba(255, 255, 255, 0.35);
}

.attacker-hits, .defender-hits {
  visibility: hidden;
}

/* ========== Hoofdmenu ========== */

.main-menu {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  /* Vangnet voor #gameOverScreen (hergebruikt deze class, geen video) en
     voor het korte moment vóór de video kan renderen. */
  background: radial-gradient(circle at 50% 20%, #2a2a2a, #141414 70%);
  overflow-y: auto;
}

/* Puur decoratieve achtergrond-loop (zie index.html) - pointer-events:none
   zorgt er meteen ook voor dat een rechtermuisklik geen contextmenu (pauze/
   opslaan/etc.) op de video kan openen; er is bewust geen `controls`. */
.main-menu-bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  pointer-events: none;
}

.main-menu-bg-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(10, 10, 10, 0.6);
  pointer-events: none;
}

.main-menu-card {
  width: min(480px, 100%);
  background: #1c1c1cd8;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.main-menu-card-wide {
  width: min(760px, 100%);
}

.main-menu-title {
  margin: 0 0 1.5rem;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.main-menu-title span {
  color: rgb(233, 141, 141);
}

.main-menu-section h2 {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.6;
}

.player-config-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 1rem;
}

.player-config-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 1rem;
}

.player-config-column {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.player-config-column-title {
  margin: 0 0 2px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.6;
}

.player-config-column-axis .player-config-column-title {
  color: rgb(220, 120, 120);
}

.player-config-column-allies .player-config-column-title {
  color: rgb(130, 170, 220);
}

.player-config-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Een power-rij (Axis/Allies-kolommen) heeft, anders dan de generieke
   "AI moves"/"Game length"-rijen, 4 toggle-opties i.p.v. 2 - te veel om
   naast icoon+naam+badge op één regel te laten passen in de nu smallere
   kolombreedte zonder te knijpen/clippen. Zet de toggle daarom op zijn
   eigen volle-breedte regel eronder. */
.player-config-power-row {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.player-config-row-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.player-config-power-row .player-config-toggle {
  align-self: stretch;
  display: flex;
}

.player-config-power-row .player-config-option {
  flex: 1;
  text-align: center;
}

/* Duidelijk, direct herkenbaar onderscheid tussen mens- en AI-bestuurde
   machten - niet enkel af te lezen aan welke van de 4 knopjes actief is. */
.player-config-row-human {
  border-color: rgba(130, 200, 140, 0.5);
  background: rgba(130, 200, 140, 0.1);
}

.player-config-row-ai {
  border-color: rgba(255, 255, 255, 0.08);
}

.player-config-control-badge {
  font-size: 1.1rem;
  flex-shrink: 0;
  opacity: 0.8;
}

.player-config-row-human .player-config-control-badge {
  color: rgb(130, 200, 140);
}

.player-config-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  padding: 2px;
  flex-shrink: 0;
}

.player-config-name {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
}

.player-config-toggle {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  overflow: hidden;
}

.player-config-option {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.player-config-option:hover {
  background: rgba(255, 255, 255, 0.1);
}

.player-config-option.active {
  background: rgb(233, 141, 141);
  color: #1c1c1c;
}

.main-menu-primary-button,
.main-menu-secondary-button {
  width: 100%;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.main-menu-primary-button {
  border: none;
  background: rgb(233, 141, 141);
  color: #1c1c1c;
}

.main-menu-primary-button:hover {
  background: rgb(240, 165, 165);
}

.main-menu-secondary-button {
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
}

.main-menu-secondary-button:hover {
  background: rgba(255, 255, 255, 0.1);
}

.main-menu-primary-button:active,
.main-menu-secondary-button:active {
  transform: scale(0.98);
}

.main-menu-divider {
  display: flex;
  align-items: center;
  text-align: center;
  gap: 10px;
  margin: 1.5rem 0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.5;
}

.main-menu-divider::before,
.main-menu-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
}

/* ========== Save/Load-schermen (localStorage, zie ui/saves.js) ========== */

.save-game-name-input {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font-family: inherit;
  font-size: 0.9rem;
}

.save-game-name-input:focus {
  outline: none;
  border-color: rgb(233, 141, 141);
}

.save-game-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 0.75rem;
}

.save-game-empty {
  opacity: 0.6;
  font-size: 0.85rem;
  text-align: center;
  padding: 1rem 0;
}

.save-game-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.save-game-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.save-game-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.save-game-item-name {
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.save-game-item-length {
  margin-top: 2px;
  align-self: flex-start;
}

.save-game-item-date {
  font-size: 0.75rem;
  opacity: 0.6;
}

.save-game-item-delete {
  flex-shrink: 0;
}

.save-game-clear-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid rgba(224, 69, 76, 0.4);
  background: rgba(224, 69, 76, 0.1);
  color: rgb(240, 150, 150);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.save-game-clear-button:hover {
  background: rgba(224, 69, 76, 0.2);
}

/* ========== Win-scherm ========== */

.game-over-card {
  text-align: center;
}

.game-over-icons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 1rem;
}

.game-over-icons img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  padding: 6px;
}

.game-over-title {
  margin-bottom: 0.5rem;
}

.game-over-subtitle {
  margin: 0 0 1.5rem;
  opacity: 0.7;
  font-size: 0.9rem;
}

/* Info-kaartje voor de geselecteerde unit (zie ui/unit-info.js) - puur
   informatief, dus bewust pointer-events:none zodat hij nooit een klik op
   de kaart eronder kan blokkeren. */
/* unit-info-card en territory-info-card staan allebei rechtsboven op
   dezelfde plek (zie unit-info.js/territory-info.js: precies één van de
   twee is ooit zichtbaar, dus overlap kan niet voorkomen). */
.unit-info-card,
.territory-info-card {
  position: fixed;
  top: 74px;
  right: 10px;
  z-index: 900;
  width: min(260px, calc(100vw - 20px));
  background-color: #212121d8;
  backdrop-filter: blur(6px);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  padding: 12px;
  /* De kaart zelf blijft niet-klikbaar (puur informatief) - alleen het
     kruisje krijgt hieronder expliciet zijn eigen pointer-events terug. */
  pointer-events: none;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.unit-info-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  pointer-events: auto;
}

.unit-info-close:hover {
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.95);
}

.unit-info-close .material-symbols-outlined {
  font-size: 15px;
}

/* Uitklap-knopje (zie info-card-shared.js renderExpandToggle) - alleen
   zichtbaar/functioneel op mobiel (.mobile-layout hieronder); op desktop
   toont het kaartje altijd alles, zoals al het geval was. */
.info-card-expand-toggle {
  display: none;
}

.mobile-layout .info-card-expand-toggle {
  display: flex;
  position: absolute;
  top: 8px;
  right: 36px;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  pointer-events: auto;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.2s ease;
}

.mobile-layout .info-card-expand-toggle:hover {
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.95);
}

.mobile-layout .info-card-expand-toggle .material-symbols-outlined {
  font-size: 15px;
}

/* Dichtgeklapt (standaard op mobiel, zie unit-info.js/territory-info.js):
   alleen de titel/header blijft zichtbaar, "erg minimaal" zoals gevraagd -
   de rest (locatie/stats/badges/cargo/eigenaars/eenheden) blijft verborgen
   totdat de speler expliciet uitklapt. Op desktop bestaat dit onderscheid
   niet - daar staat alles altijd gewoon open. */
.mobile-layout .info-card-details {
  display: none;
}

.mobile-layout .info-card-expanded .info-card-details {
  display: block;
}

.mobile-layout .info-card-expanded .info-card-expand-toggle {
  transform: rotate(180deg);
}

.unit-info-cargo {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.unit-info-cargo-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  opacity: 0.7;
  margin-bottom: 6px;
}

.unit-info-cargo-label .material-symbols-outlined {
  font-size: 15px;
}

.unit-info-cargo-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.unit-info-cargo-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  padding: 3px;
}

.unit-info-cargo-empty {
  font-size: 0.75rem;
  opacity: 0.5;
  font-style: italic;
}

/* Territory-info kaartje (zie ui/territory-info.js) - positionering/look
   gedeeld met .unit-info-card, zie die regel hierboven. */

.territory-info-title {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 10px;
  padding-right: 44px;
}

.territory-info-stats {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.territory-info-owners {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.territory-info-owner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
}

.territory-info-owner-label {
  opacity: 0.6;
}

.territory-info-owner-value {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.territory-info-neutral {
  opacity: 0.6;
  font-weight: 400;
  font-style: italic;
}

.territory-info-flag {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
}

/* Zelfde ronde achtergrond-look als een eenheid op het speelbord zelf (zie
   .unit-marker) - de eigenlijke kleur komt van de .unit-power-X klasse die
   territory-info.js er al bij zet (dezelfde klassen als op de kaart). */
.territory-info-unit-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
  /* De kaart zelf is pointer-events:none (zie .unit-info-card/
     .territory-info-card) - zonder dit expliciet terug te zetten zou
     :hover hieronder nooit afgaan (het "raakt" de chip dan nooit, de muis
     gaat er zogenaamd dwars doorheen naar de kaart eronder). */
  pointer-events: auto;
}

/* Geen eigen donkere cirkel meer nodig binnen de chip - die kleur komt nu
   van .unit-power-X op de chip zelf. */
.territory-info-unit-chip .unit-info-cargo-icon {
  background: none;
  padding: 2px;
}

.territory-info-unit-count {
  position: absolute;
  bottom: -3px;
  right: -3px;
  min-width: 14px;
  height: 14px;
  padding: 0 2px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

/* On-hover tooltip: welk type + welk land (met vlagicoon), zelfde
   kaartje-achtige styling als de rest van dit infopaneel. */
.territory-info-unit-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 6px;
  background: #111318f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 10;
}

.territory-info-unit-chip:hover .territory-info-unit-tooltip {
  opacity: 1;
}

.territory-info-unit-tooltip .territory-info-flag {
  width: 14px;
  height: 14px;
}

.unit-info-card.unit-info-hidden,
.territory-info-card.unit-info-hidden {
  opacity: 0;
  transform: translateY(-8px);
}

.unit-info-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.unit-info-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  padding: 4px;
  flex-shrink: 0;
}

.unit-info-titles {
  min-width: 0;
}

.unit-info-title {
  font-weight: 700;
  font-size: 0.95rem;
}

.unit-info-count {
  opacity: 0.6;
  font-weight: 600;
  font-size: 0.8rem;
}

.unit-info-subtitle {
  font-size: 0.75rem;
  opacity: 0.6;
}

.unit-info-location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  opacity: 0.85;
  margin-bottom: 10px;
}

.unit-info-location .material-symbols-outlined {
  font-size: 16px;
  opacity: 0.7;
}

.unit-info-stats {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.unit-info-stat {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 6px 4px;
  font-weight: 700;
  font-size: 0.85rem;
}

.unit-info-stat .material-symbols-outlined {
  font-size: 15px;
  opacity: 0.7;
}

.unit-info-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.unit-info-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}

.unit-info-badge .material-symbols-outlined {
  font-size: 13px;
}

.unit-info-badge-warn {
  background: rgba(233, 179, 88, 0.22);
  color: rgb(233, 179, 88);
}

/* ==========================================================================
   Mobiele layout - bewust helemaal onderaan het bestand: deze regels
   overschrijven bestaande basisregels (zelfde specificiteit), en CSS laat de
   LAATSTE regel in bron-volgorde winnen als de specificiteit gelijk is.
   Ergens middenin het bestand zou een latere, onvoorwaardelijke basisregel
   deze dus alsnog overschrijven.

   Bewust GEEN @media (max-width: ...) meer: de ".mobile-layout"-klasse op
   <html> wordt gezet door ui/layout-mode.js, dat 'm standaard gewoon laat
   meebewegen met de vensterbreedte (hetzelfde effect als een @media-regel),
   maar de speler kan het via het menu ook expliciet forceren naar "Mobile"
   of "Desktop", los van de daadwerkelijke schermbreedte. Eén CSS-regel op
   één plek i.p.v. een dubbele (auto + geforceerd) versie van elke regel. */
.mobile-layout #top-bar {
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  flex-wrap: wrap;
  row-gap: 6px;
}

.mobile-layout .top-bar-divider {
  display: none;
}

.mobile-layout .top-bar-label {
  display: none;
}

.mobile-layout #round-display { order: 1; }

.mobile-layout #phase-display {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
}

.mobile-layout #phase-display span {
  display: block;
  font-size: 0.7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-layout .top-bar-spacer {
  /* #phase-display duwt de rest zelf al naar rechts (flex: 1 1 auto) -
     een extra grow-item zou alleen maar ruimte wegkapen op rij 1. */
  display: none;
}

.mobile-layout .top-bar-actions { order: 3; }
.mobile-layout #menu-button { order: 4; }

.mobile-layout .end-phase-button span:last-child,
.mobile-layout .ai-step-button span:last-child {
  display: none;
}

.mobile-layout .end-phase-button,
.mobile-layout .ai-step-button {
  padding: 0.55rem;
  border-radius: 50%;
}

.mobile-layout #powers-display {
  order: 5;
  flex: 1 0 100%;
  /* Zonder deze override erft dit element de basisregel "flex-wrap: wrap"
     (#powers-display hieronder) - waardoor de 5 machten-icoontjes bij een
     te smalle rij niet netjes opzij scrollen (het doel van overflow-x
     hieronder), maar juist elk op hun eigen regel onder elkaar terecht-
     komen zodra ze niet allemaal naast elkaar passen. */
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px; /* ruimte voor de badges die net over de rand van het icoon steken */
}

.mobile-layout #powers-display img {
  height: 28px;
}

.mobile-layout .power-icon-wrapper {
  flex-shrink: 0;
}

/* Op mobiel als een gecentreerd paneel tonen (zelfde uitlijning als
   #settingsModal e.a. via .modal-overlay) i.p.v. als dropdown onder de
   knop - ruimer en duidelijker op een klein scherm dan een smalle strook
   die tegen de rand van het scherm aan hangt. max-height + eigen scroll:
   met steeds meer menu-items (AI-modus, badge-grootte, layout, AI-snelheid,
   ...) kan het paneel op een kort scherm anders voorbij de onderkant van
   het venster groeien, waardoor de onderste schakelaars onbereikbaar
   worden. */
.mobile-layout .menu-panel {
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  width: min(320px, calc(100vw - 32px));
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

/* Zelfde reden als .menu-panel hierboven: de top-bar is nu twee rijen hoog,
   dus het info-kaartje moet lager beginnen om niet over de machten-rij heen
   te vallen. */
.mobile-layout .unit-info-card,
.mobile-layout .territory-info-card {
  top: 100px;
}

/* Battle-paneel: drie kolommen (verdediger/dobbelstenen/aanvaller) naast
   elkaar passen niet meer leesbaar op een telefoonbreedte - elke kolom
   kreeg dan zo weinig ruimte dat zelfs "Defender"/"Attacker" en unit-namen
   als "Tank" al moesten afknippen (...). Onder elkaar i.p.v. naast elkaar
   geeft elke kolom de volle breedte. */
.mobile-layout .battle-view {
  flex-direction: column;
}

.mobile-layout .battle-center {
  width: 100%;
  order: 2;
}

.mobile-layout .battle-col-L { order: 1; }
.mobile-layout .battle-col-R { order: 3; }

/* Ook de volle kolombreedte is op mobiel nog te smal om label + hits + een
   brede tokens-rij netjes naast elkaar te tonen zodra een unit-type in de
   dubbele cijfers loopt - de bolletjes kregen dan alsnog nauwelijks ruimte.
   Laat de tokens daarom op mobiel naar hun EIGEN volle-breedte regel
   wrappen, onder naam+stat en de hits-kolom (die samen op de eerste regel
   blijven staan) - een bewust ander (compacter) ontwerp dan de brede
   naast-elkaar-indeling op desktop. */
.mobile-layout .unit-type-row {
  flex-wrap: wrap;
  row-gap: 4px;
}

.mobile-layout .unit-tokens {
  order: 3;
  flex: 1 1 100%;
  justify-content: flex-start;
}

/* Modals/splash/log iets dichter tegen de randen aan, en de knoppenrij in
   de main-menu speler-configuratie mag op smalle schermen best
   smaller/compacter - voorkomt dat "Human"/"Easy"/"Moderate"/"Hard" gaan
   knijpen tot onleesbare tekst. */
.mobile-layout .main-menu-card {
  padding: 1.5rem 1.25rem;
}

/* De achtergrondvideo is puur decoratief en op een portret-schermformaat
   (uitgesneden via object-fit:cover) toch nauwelijks herkenbaar - weglaten
   op mobiel bespaart bovendien batterij/dataverbruik. De effen overlay
   hoort er dan ook niet meer bij (die diende enkel om tekst leesbaar te
   houden BOVENOP de video); zonder video volstaat de bestaande
   radial-gradient achtergrond van .main-menu zelf. */
.mobile-layout .main-menu-bg-video,
.mobile-layout .main-menu-bg-overlay {
  display: none;
}

/* .main-menu is flex + align-items:center or justify-content:center - een
   welbekende CSS-valkuil: zodra de gecenterde inhoud hoger is dan de
   viewport, wordt het bovenste stuk (vóór het midden) onbereikbaar voor
   scroll, ook al staat er overflow-y:auto op. Op mobiel (smal EN vaak kort
   scherm, met bovendien de speler-configuratie in twee/eeen kolom(men) die
   al gauw hoger is dan het beschikbare oppervlak) was dit precies waarom
   "past niet op het scherm, en ik kan niet goed scrollen" gebeurde. Simpele,
   betrouwbare fix: bovenaan laten beginnen i.p.v. centreren, zodat ALLE
   inhoud - ook het bovenste stuk - altijd gewoon bereikbaar is via scroll. */
.mobile-layout .main-menu {
  align-items: flex-start;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

/* Twee kolommen naast elkaar (Axis/Allies) worden op een smal scherm al
   snel te krap voor icoon + naam + badge + 4 toggle-knoppen - stapel ze dan
   in plaats daarvan onder elkaar, elk nog steeds met hun eigen kop. */
.mobile-layout .player-config-columns {
  grid-template-columns: 1fr;
}

.mobile-layout .player-config-toggle {
  flex-shrink: 0;
}

.mobile-layout .player-config-option {
  padding: 6px 8px;
  font-size: 0.68rem;
}

.mobile-layout .player-config-name {
  font-size: 0.8rem;
}

/* Aanraakschermen (ongeacht schermbreedte, dus ook een grote tablet): geen
   hover-state om op te leunen, dus knoppen iets ruimer dan de 36px die op
   een muis-bediende desktop prima is. Deze regel bestaat OOK los als een
   @media (pointer: coarse) hieronder, voor een écht touch-apparaat dat
   toevallig niet in .mobile-layout staat (bv. een groot tablet). */
.mobile-layout .icon-button {
  width: 2.5rem;
  height: 2.5rem;
}

/* Unit-markers op de kaart worden hier bewust NIET vergroot: units staan
   vaak dicht opeen, en een groter tapgebied zou dan juist vaker de
   VERKEERDE unit raken. */
@media (pointer: coarse) {
  .icon-button {
    width: 2.5rem;
    height: 2.5rem;
  }
}