:root {
  --bg: #06111c;
  --panel: #0c2636;
  --ink: #e6f0f5;
  --muted: #8fa6b7;
  --line: rgba(173, 215, 234, 0.16);
  --cyan: #6fe1f4;
  --green: #6fe1b5;
  --amber: #f0bc74;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: radial-gradient(ellipse 60% 40% at 75% 0%, #123e54 0%, transparent 60%), var(--bg);
  color: var(--ink);
  font:
    14px Arial,
    Helvetica,
    sans-serif;
}
button,
input,
select {
  font: inherit;
}
header {
  position: sticky;
  top: 0;
  z-index: 5;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 21, 33, 0.94);
  backdrop-filter: blur(12px);
}
.bar {
  max-width: 1180px;
  margin: auto;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mark {
  height: 38px;
  width: 38px;
  display: grid;
  place-items: center;
  border: 1px solid #56b8cb88;
  border-radius: 10px;
  background: #3bcbe419;
  color: #bdf8ff;
  font-size: 20px;
}
.brand b {
  display: block;
  font-size: 17px;
  letter-spacing: -0.02em;
}
.brand small,
.private {
  font-weight: bold;
  color: #8ed3e1;
  font-size: 10px;
  letter-spacing: 0.15em;
}
.private {
  color: #8ee4bf;
  letter-spacing: 0;
}
main {
  max-width: 1180px;
  margin: auto;
  padding: 30px 22px 50px;
}
.intro {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 22px;
}
.eyebrow {
  margin: 0 0 7px;
  color: var(--cyan);
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.18em;
}
.intro h1 {
  margin: 0;
  font-size: 34px;
  letter-spacing: -0.04em;
}
.intro p {
  color: var(--muted);
  margin: 9px 0 0;
  line-height: 1.5;
}
.stats {
  display: flex;
  gap: 18px;
}
.stats div {
  border-left: 1px solid var(--line);
  padding-left: 13px;
}
.stats b {
  display: block;
  font-size: 20px;
}
.stats span {
  color: var(--muted);
  font-size: 11px;
}
.tabs {
  display: flex;
  gap: 4px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff08;
  padding: 4px;
  margin-bottom: 22px;
}
.tabs button {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #9db3c1;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: bold;
  white-space: nowrap;
}
.tabs button.active,
.tabs button:hover {
  background: #5fdff022;
  color: #e4fcff;
}
.view {
  display: none;
}
.view.active {
  display: block;
}
.grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 20px;
}
.panel {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(145deg, #143747dd, #081b29ee);
  padding: 20px;
  box-shadow: 0 16px 40px #0003;
}
.panel h2 {
  margin: 2px 0 0;
  font-size: 20px;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 17px;
}
.count {
  border: 1px solid #65dced33;
  border-radius: 20px;
  background: #65dced12;
  color: #c4f8ff;
  padding: 5px 8px;
  font-size: 11px;
}
.filters {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 8px;
}
.search,
.select {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #071b29;
  padding: 0 11px;
  color: #88aab8;
}
.search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
}
select {
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
option {
  background: #102d3d;
}
.list {
  max-height: 490px;
  margin-top: 13px;
  overflow: auto;
  padding-right: 3px;
}
.ship {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #06172288;
  color: var(--ink);
  padding: 10px 11px;
  margin: 0 0 7px;
  text-align: left;
  cursor: pointer;
}
.ship:hover {
  border-color: #6fe1f477;
  background: #277a9122;
}
.ship.selected {
  border-color: var(--cyan);
  background: #37bad226;
}
.tick {
  width: 18px;
  height: 18px;
  border: 1px solid #557382;
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: #06111c;
}
.selected .tick {
  background: var(--cyan);
  border-color: var(--cyan);
}
.ship b {
  display: block;
  font-size: 13px;
}
.ship small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}
.owners {
  color: #9de6f2;
  font-size: 11px;
  white-space: nowrap;
}
.result {
  background: linear-gradient(145deg, #123d4b, #071923);
}
.lineup-list {
  display: grid;
  gap: 9px;
}
.lineup-ship {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #051721aa;
  overflow: hidden;
}
.lineup-ship[open] {
  border-color: #69d9e466;
  background: #0a2633;
}
.lineup-ship summary {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  align-items: center;
  gap: 9px;
  padding: 12px;
  cursor: pointer;
  list-style: none;
}
.lineup-ship summary::-webkit-details-marker {
  display: none;
}
.lineup-arrow {
  color: var(--cyan);
  font-size: 13px;
  transition: transform 0.15s;
}
.lineup-ship[open] .lineup-arrow {
  transform: rotate(90deg);
}
.lineup-name b {
  display: block;
}
.lineup-name small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}
.assignment {
  border-radius: 14px;
  padding: 5px 8px;
  background: #f0bc741d;
  color: #f6d095;
  font-size: 10px;
  font-weight: bold;
  white-space: nowrap;
}
.assignment.ready {
  background: #6fe1b51f;
  color: #99f0cc;
}
.assignment.substitute {
  border: 1px solid #f2c66d99;
  background: #4b3818;
  color: #ffe3a1;
}
.assignment.substitute.ready {
  border-color: #ffd477;
  background: #6b4a16;
  color: #fff1c6;
  box-shadow: 0 0 0 1px #ffd47733;
}
.candidate-group {
  display: grid;
  gap: 6px;
}
.candidate-group.substitute-group {
  margin-top: 12px;
  border: 1px solid #f2c66d8f;
  border-radius: 11px;
  background: linear-gradient(145deg, #3c2e17e8, #1e2118f2);
  padding: 12px;
  box-shadow:
    inset 4px 0 #f2c66d,
    0 0 0 1px #f2c66d14;
}
.candidate-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #9edce7;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.candidate-heading small {
  color: #7898a6;
  font-weight: normal;
  letter-spacing: 0;
  text-transform: none;
}
.candidate-heading.substitute-heading {
  color: #ffd477;
}
.candidate-heading.substitute-heading small {
  color: #d8bb7a;
}
.candidate-list {
  display: grid;
  gap: 6px;
  padding: 0 12px 12px;
}
.candidate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  border: 1px solid #add7ea1f;
  border-radius: 8px;
  background: #061923;
  color: #dcecf2;
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
}
.candidate:hover {
  border-color: #6fe1f477;
  background: #174255;
}
.candidate.chosen {
  border-color: var(--green);
  background: #2a8d6b24;
}
.candidate.substitute-choice {
  border-color: #f2c66d38;
  background: #211d14;
}
.candidate.substitute-choice:hover {
  border-color: #f2c66da8;
  background: #3a2d17;
}
.candidate.substitute-choice.chosen {
  border-color: #ffd477;
  background: #5a4018;
  box-shadow:
    inset 4px 0 #ffd477,
    0 0 0 1px #ffd47726;
}
.candidate.substitute-choice .candidate-state {
  color: #ffe09a !important;
}
.candidate span {
  display: block;
  font-weight: bold;
}
.candidate small {
  display: block;
  margin-top: 3px;
  color: #8fa6b7;
}
.candidate-state {
  color: #91ddeb !important;
  text-align: right;
  font-size: 10px !important;
}
.lineup-final {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.lineup-final-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.lineup-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.lineup-final h3 {
  margin: 0;
  font-size: 14px;
}
.clear-plan,
.export-plan {
  border: 0;
  background: transparent;
  color: #8eb1c0;
  cursor: pointer;
  font-size: 11px;
}
.clear-plan:hover {
  color: #dff8ff;
}
.export-plan {
  display: inline-flex;
  align-items: center;
  border: 1px solid #6fe1f455;
  border-radius: 7px;
  background: #6fe1f416;
  color: #c9f8ff;
  padding: 7px 9px;
  font-weight: bold;
  text-decoration: none;
}
.export-plan:hover {
  border-color: #6fe1f499;
  background: #6fe1f426;
}
.image-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(0, 7, 13, 0.88);
  backdrop-filter: blur(10px);
}
.image-preview-dialog {
  width: min(1100px, 100%);
  max-height: 94vh;
  overflow: auto;
  border: 1px solid #6fe1f455;
  border-radius: 16px;
  background: #071923;
  padding: 16px;
  box-shadow: 0 25px 80px #000a;
}
.image-preview-dialog img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid #6fe1f433;
}
.image-preview-head,
.image-preview-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.image-preview-head {
  margin-bottom: 12px;
}
.image-preview-head h3 {
  margin: 0;
}
.image-preview-actions {
  justify-content: flex-end;
  margin-top: 12px;
  flex-wrap: wrap;
}
.image-preview-actions small {
  margin-right: auto;
  color: var(--muted);
}
.final-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(100px, auto) minmax(100px, auto);
  align-items: center;
  gap: 10px;
  padding: 8px 3px;
  border-bottom: 1px solid #add7ea12;
  font-size: 12px;
}
.final-row span {
  color: #8fa6b7;
}
.final-row strong {
  color: #9cf0cc;
}
.final-row .substitute-name {
  border-left: 3px solid #f2c66d;
  border-radius: 6px;
  background: #f2c66d1d;
  color: #ffe3a1;
  padding: 5px 8px;
}
.final-row .open-slot {
  color: #f3cb92;
}
.final-row .substitute-name.open-slot {
  color: #c2a96f;
}
.empty {
  min-height: 220px;
  display: grid;
  place-content: center;
  text-align: center;
  color: #7090a0;
  line-height: 1.5;
}
.empty .icon {
  font-size: 28px;
}
.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
}
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 780px;
  font-size: 12px;
}
th {
  text-align: left;
  background: #6fe1f412;
  color: #9fc5d1;
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
th,
td {
  padding: 11px 12px;
  border-bottom: 1px solid #add7ea17;
  vertical-align: top;
}
td {
  color: #a8bdc9;
  line-height: 1.45;
}
td b {
  color: var(--ink);
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
.card {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #06172288;
  padding: 14px;
}
.player-card {
  padding: 0;
  overflow: hidden;
}
.player-card[open] {
  border-color: #6fe1f455;
}
.player-card summary {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 14px;
  cursor: pointer;
  list-style: none;
}
.player-card summary::-webkit-details-marker {
  display: none;
}
.player-card .avatar {
  margin: 0;
}
.player-card .player-name b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player-card .player-name p {
  font-size: 11px;
  color: var(--muted);
  margin: 5px 0 0;
}
.player-open {
  color: var(--cyan);
  transition: transform 0.15s;
}
.player-card[open] .player-open {
  transform: rotate(90deg);
}
.player-assets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 12px;
  max-height: 280px;
  overflow: auto;
}
.player-assets h3 {
  margin: 0 0 7px;
  color: #9edce7;
  font-size: 11px;
}
.player-assets .asset-list {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
}
.player-assets .none {
  color: #6f8f9d;
  font-size: 11px;
}
.avatar {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: #6fe1f422;
  color: #bdf8ff;
  font-weight: bold;
  margin-bottom: 9px;
}
.card > b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card > p {
  font-size: 11px;
  color: var(--muted);
  margin: 5px 0 9px;
}
.tag {
  display: inline-block;
  background: #6fe1f414;
  color: #a5cdda;
  padding: 3px 5px;
  border-radius: 4px;
  font-size: 10px;
  margin: 0 3px 3px 0;
}
.filebox {
  margin-top: 20px;
  border: 1px dashed #6fe1f455;
  border-radius: 11px;
  padding: 11px;
  color: #97b9c7;
  font-size: 12px;
}
.filebox input {
  max-width: 100%;
}
@media (max-width: 720px) {
  .intro {
    align-items: start;
    flex-direction: column;
  }
  .grid {
    grid-template-columns: 1fr;
  }
  .filters {
    grid-template-columns: 1fr 1fr;
  }
  .search {
    grid-column: span 2;
  }
  .owners {
    display: none;
  }
  .ship {
    grid-template-columns: 24px 1fr;
  }
  .private {
    display: none;
  }
  .intro h1 {
    font-size: 29px;
  }
  .lineup-ship summary {
    grid-template-columns: 18px 1fr;
  }
  .assignment {
    grid-column: 2;
    justify-self: start;
  }
  .player-assets {
    grid-template-columns: 1fr;
  }
  .lineup-final-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .lineup-actions {
    justify-content: flex-start;
  }
  .final-row {
    grid-template-columns: 1fr;
  }
  .final-row strong:before {
    display: inline;
    color: #7898a6;
  }
  .final-row strong:not(.substitute-name):before {
    content: "Stamm: ";
  }
  .final-row .substitute-name:before {
    content: "Ersatz: ";
  }
}
.candidate:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.candidate:disabled:hover {
  border-color: #add7ea1f;
  background: #061923;
}
.candidate.substitute-choice:disabled:hover {
  border-color: #f2c66d38;
  background: #211d14;
}
/* Im Gefechtsplaner bleibt die Schiffssuche immer als vollständiges Textfeld sichtbar. */
.search,
.select {
  min-width: 0;
}
.search input {
  min-width: 0;
}
.select select {
  width: 100%;
  min-width: 0;
}
#plan .filters {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
#plan .filters .search {
  grid-column: 1/-1;
}
.battle-workspace {
  margin-bottom: 20px;
}
.battle-workspace:empty {
  display: none;
}
.battle-meta-note {
  color: var(--muted);
  font-size: 12px;
}
.availability-badge {
  display: inline-block;
  margin-left: 6px;
  border-radius: 12px;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: bold;
}
.availability-badge.available {
  background: #6fe1b520;
  color: #91ebc4;
}
.availability-badge.unsure {
  background: #f0bc7422;
  color: #f4ca8d;
}
.availability-badge.unavailable {
  background: #ff73731c;
  color: #ffaaaa;
}
.availability-badge.unknown {
  background: #58b9f022;
  color: #8ed7ff;
}
.battle-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.battle-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #06172288;
  padding: 15px;
}
.battle-card h3 {
  margin: 0 0 5px;
}
.battle-card p {
  margin: 5px 0;
  color: var(--muted);
  font-size: 12px;
}
.battle-card-actions {
  display: flex;
  gap: 7px;
  margin-top: 12px;
}
.battle-card-actions button {
  flex: 1;
}
.remove-ships {
  color: #ffaaaa;
}
.remove-ships:hover {
  color: #ffd0d0;
}
@media (max-width: 720px) {
  #plan .filters {
    grid-template-columns: 1fr 1fr;
  }
  #plan .filters .search {
    grid-column: 1/-1;
  }
  #plan .filters .select:last-child {
    grid-column: 1/-1;
  }
}

.private {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.private small {
  font-size: 10px;
  color: #9edfc9;
}
.account-btn,
.primary-btn,
.secondary-btn,
.danger-btn {
  border: 1px solid #6fe1f466;
  border-radius: 8px;
  padding: 9px 12px;
  background: #6fe1f41c;
  color: #d6fbff;
  cursor: pointer;
  font-weight: bold;
  font-size: 12px;
}
.primary-btn {
  background: #64dff1;
  color: #06202c;
  border-color: #64dff1;
}
.secondary-btn {
  background: transparent;
  color: #a8c9d4;
}
.danger-btn {
  border-color: #ff8d8d66;
  background: #ff6f6f18;
  color: #ffc1c1;
}
.account-btn:disabled,
.primary-btn:disabled,
.secondary-btn:disabled,
.danger-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}
.modal-bg {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: #02090de8;
  padding: 18px;
}
.modal {
  width: min(440px, 100%);
  border: 1px solid #75dce266;
  border-radius: 16px;
  background: #0b2434;
  padding: 22px;
  box-shadow: 0 25px 80px #000;
}
.modal h2 {
  margin: 0 0 6px;
}
.modal p {
  color: #9eb9c7;
  font-size: 13px;
  line-height: 1.45;
}
.modal input,
.admin-form input,
.admin-form select,
.manage-select,
.inventory-search {
  width: 100%;
  border: 1px solid #a9ddeb33;
  border-radius: 8px;
  background: #061923;
  color: #eaf8fc;
  padding: 10px;
}
.modal input {
  margin: 7px 0;
}
.modal-actions,
.form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 13px;
}
.notice {
  margin-top: 9px;
  min-height: 16px;
  color: #ffca83;
  font-size: 12px;
  line-height: 1.4;
}
.notice.ok {
  color: #84e9bc;
}
.notice.error {
  color: #ff9e9e;
}
.manage {
  margin-top: 20px;
}
.manage-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.manage-head h2,
.manage-head h3 {
  margin: 2px 0;
}
.manage-select {
  width: min(360px, 100%);
}
.inventory-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.inventory-box {
  border: 1px solid #add7ea22;
  border-radius: 12px;
  background: #04172266;
  overflow: hidden;
}
.inventory-title {
  padding: 12px;
  border-bottom: 1px solid #add7ea1f;
}
.inventory-title-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}
.inventory-title h3 {
  margin: 0;
  font-size: 14px;
}
.inventory-title small {
  color: #8ea9b8;
}
.inventory-toggle {
  border: 1px solid #6fe1f444;
  border-radius: 7px;
  background: #6fe1f412;
  color: #bdeff5;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 10px;
  font-weight: bold;
}
.inventory-toggle:hover {
  border-color: #6fe1f488;
  background: #6fe1f422;
}
.own-list {
  max-height: 330px;
  overflow: auto;
}
.own-list.compact {
  height: auto;
  max-height: 330px;
}
.own-row {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid #add7ea12;
  font-size: 12px;
}
.own-row:hover {
  background: #6fe1f40a;
}
.own-row small {
  color: #90aab8;
}
.inventory-empty {
  padding: 28px 14px;
  text-align: center;
  color: #7897a6;
  font-size: 12px;
  line-height: 1.5;
}
.admin-area {
  margin-top: 18px;
  border-top: 1px solid #add7ea20;
  padding-top: 18px;
}
.admin-section {
  margin: 0 0 10px;
  border: 1px solid #add7ea20;
  border-radius: 11px;
  background: #061a2677;
}
.admin-section summary {
  cursor: pointer;
  padding: 13px 15px;
  font-weight: bold;
  color: #dff8ff;
}
.admin-section > div {
  padding: 2px 15px 15px;
}
.admin-section p {
  color: #94adba;
  font-size: 12px;
  line-height: 1.5;
}
.admin-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.admin-form .wide {
  grid-column: 1/-1;
}
.admin-form h4 {
  grid-column: 1/-1;
  margin: 10px 0 0;
}
.admin-divider {
  grid-column: 1/-1;
  height: 1px;
  background: #add7ea20;
  margin: 7px 0;
}
.sync-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.sync-dot {
  color: #6fe1b5;
}
.hidden {
  display: none !important;
}
@media (max-width: 760px) {
  .inventory-grid,
  .admin-form {
    grid-template-columns: 1fr;
  }
  .admin-form .wide {
    grid-column: auto;
  }
  .manage-head {
    align-items: stretch;
    flex-direction: column;
  }
  .own-list {
    max-height: 260px;
  }
}
.account-choice {
  border: 1px solid #67dfea33;
  border-radius: 10px;
  background: #0a2a3766;
  padding: 12px;
}
.account-choice label {
  display: block;
  margin-bottom: 7px;
  color: #bfeef5;
  font-size: 12px;
  font-weight: bold;
}
.account-choice small {
  display: block;
  margin-top: 7px;
  color: #91afbd;
  line-height: 1.45;
}
.profile-preview {
  border-left: 3px solid #6fe1f4;
  margin-top: 8px;
  padding: 8px 10px;
  background: #6fe1f40b;
  color: #acd5df;
  font-size: 12px;
}
.profile-preview b {
  color: #e4f8fc;
}
.admin-tabs {
  display: flex;
  gap: 5px;
  overflow: auto;
  margin: 10px 0 14px;
  padding: 4px;
  border: 1px solid #add7ea22;
  border-radius: 11px;
  background: #04172288;
}
.admin-tabs button {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #91aeba;
  padding: 9px 12px;
  cursor: pointer;
  font-weight: bold;
  white-space: nowrap;
}
.admin-tabs button.active,
.admin-tabs button:hover {
  background: #6fe1f41c;
  color: #dffaff;
}
.admin-pane {
  display: none;
}
.admin-pane.active {
  display: block;
}
.admin-card {
  border: 1px solid #add7ea20;
  border-radius: 11px;
  background: #061a2677;
  padding: 15px;
  margin-bottom: 12px;
}
.admin-card h3,
.admin-card h4 {
  margin: 0 0 10px;
}
.account-table-wrap {
  overflow: auto;
  border: 1px solid #add7ea22;
  border-radius: 10px;
  margin-bottom: 14px;
}
.account-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1080px;
}
.account-table th,
.account-table td {
  padding: 9px 10px;
  border-bottom: 1px solid #add7ea16;
  text-align: left;
  font-size: 11px;
}
.account-table th {
  color: #90b8c5;
  background: #6fe1f40b;
}
.account-table input {
  width: 185px;
  border: 1px solid #add7ea33;
  border-radius: 7px;
  background: #041720;
  color: #eaf8fc;
  padding: 7px;
}
.account-table input[type="password"] {
  width: 155px;
}
.account-email {
  color: #b6dce5;
}
.password-safe {
  color: #7f9ba8;
}
.reset-cell,
.email-cell {
  display: flex;
  gap: 6px;
  align-items: center;
}
.survey-open-btn {
  border-color: #f0bc7466;
  background: #f0bc741a;
  color: #f7d39d;
}
.survey-modal {
  width: min(760px, 100%);
  max-height: 92vh;
  overflow: auto;
}
.survey-modal-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.survey-modal-head .count {
  white-space: nowrap;
}
.survey-questions {
  display: grid;
  gap: 8px;
}
.survey-question {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  border: 1px solid #add7ea22;
  border-radius: 10px;
  background: #061923;
  padding: 11px 12px;
}
.survey-question b {
  display: block;
}
.survey-question small {
  display: block;
  margin-top: 4px;
  color: #8fa9b7;
}
.survey-question .existing {
  color: #99cbd5;
}
.survey-answer {
  display: flex;
  gap: 6px;
}
.survey-answer label {
  position: relative;
}
.survey-answer input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.survey-answer span {
  display: block;
  min-width: 54px;
  border: 1px solid #add7ea33;
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
  color: #9cb4bf;
  cursor: pointer;
  font-weight: bold;
}
.survey-answer input:checked + span {
  border-color: #6fe1f4;
  background: #6fe1f426;
  color: #dffbff;
}
.survey-answer input[value="true"]:checked + span {
  border-color: #6fe1b5;
  background: #6fe1b524;
  color: #aef2d4;
}
.survey-builder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 12px 0;
}
.survey-picker {
  border: 1px solid #add7ea22;
  border-radius: 10px;
  background: #04172266;
  overflow: hidden;
}
.survey-picker-head {
  padding: 11px;
  border-bottom: 1px solid #add7ea1f;
}
.survey-picker-head div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.survey-picker-head b {
  font-size: 13px;
}
.survey-picker-list {
  max-height: 255px;
  overflow: auto;
}
.survey-picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid #add7ea12;
  font-size: 11px;
}
.survey-picker-row:hover {
  background: #6fe1f40a;
}
.survey-picker-row small {
  color: #829eab;
}
.survey-summary {
  border: 1px solid #6fe1f433;
  border-radius: 10px;
  background: #6fe1f40a;
  padding: 12px;
  margin-bottom: 12px;
}
.survey-summary h4 {
  margin: 0 0 7px;
}
.survey-summary p {
  margin: 5px 0;
}
.survey-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.survey-progress {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}
.survey-progress th,
.survey-progress td {
  padding: 8px;
  border-bottom: 1px solid #add7ea18;
  text-align: left;
  font-size: 11px;
}
.survey-progress th {
  color: #90b8c5;
}
.survey-ok {
  color: #82e8b8;
}
.survey-warn {
  color: #f2c17f;
}
.survey-setup {
  border-left: 3px solid #f0bc74;
  background: #f0bc7410;
  padding: 10px 12px;
  color: #efcf9d;
  font-size: 12px;
  line-height: 1.5;
}
@media (max-width: 760px) {
  .survey-builder {
    grid-template-columns: 1fr;
  }
  .survey-question {
    grid-template-columns: 1fr;
  }
  .survey-answer {
    width: 100%;
  }
  .survey-answer label {
    flex: 1;
  }
  .survey-answer span {
    width: 100%;
  }
  .reset-cell,
  .email-cell {
    align-items: stretch;
    flex-direction: column;
  }
}
.player-account .stats {
  display: none !important;
}
.player-account .intro {
  margin-bottom: 16px;
}
.player-account .intro h1 {
  font-size: 30px;
}
.player-account #dataStatus {
  margin-top: 14px;
}
@media (max-width: 1050px) {
  #plan .filters {
    grid-template-columns: 1fr 1fr;
  }
  #plan .filters .search {
    grid-column: 1/-1;
  }
}
.battle-editor {
  border: 1px solid #6fe1f433;
  border-radius: 15px;
  background: linear-gradient(145deg, #123646dd, #071b29ee);
  padding: 17px;
}
.battle-editor-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 13px;
}
.battle-editor-head h2 {
  margin: 2px 0;
}
.battle-form-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 8px;
}
.battle-form-grid input,
.battle-form-grid select,
.battle-form-grid textarea,
.availability-select {
  width: 100%;
  border: 1px solid #a9ddeb33;
  border-radius: 8px;
  background: #061923;
  color: #eaf8fc;
  padding: 10px;
}
.battle-form-grid textarea {
  grid-column: 1/-1;
  min-height: 75px;
  resize: vertical;
}
.battle-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.battle-toolbar label {
  color: #a8c3ce;
  font-size: 11px;
}
.availability-panel {
  margin-top: 14px;
  border-top: 1px solid #add7ea22;
  padding-top: 13px;
}
.availability-panel h3 {
  margin: 0 0 5px;
}
.availability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 7px;
  margin-top: 10px;
}
.availability-row {
  display: grid;
  grid-template-columns: 1fr 142px;
  align-items: center;
  gap: 7px;
  border: 1px solid #add7ea1b;
  border-left-width: 4px;
  border-radius: 8px;
  background: #04172266;
  padding: 7px 9px;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.availability-row b {
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.availability-select {
  padding: 7px;
  font-size: 10px;
  font-weight: bold;
  transition:
    border-color 0.15s,
    background 0.15s,
    color 0.15s;
}
.availability-row.available,
.availability-select.available {
  border-color: #6fe1b5;
}
.availability-row.available {
  background: #6fe1b512;
}
.availability-select.available {
  background: #123a32;
  color: #9cf0cc;
}
.availability-row.unsure,
.availability-select.unsure {
  border-color: #f0bc74;
}
.availability-row.unsure {
  background: #f0bc7412;
}
.availability-select.unsure {
  background: #3b2d1b;
  color: #f7d69f;
}
.availability-row.unavailable,
.availability-select.unavailable {
  border-color: #ff7f7f;
}
.availability-row.unavailable {
  background: #ff737312;
}
.availability-select.unavailable {
  background: #3a2025;
  color: #ffb2b2;
}
.availability-row.unknown,
.availability-select.unknown {
  border-color: #58b9f0;
}
.availability-row.unknown {
  background: #58b9f012;
}
.availability-select.unknown {
  background: #123349;
  color: #9bddff;
}
.availability-own {
  margin-bottom: 14px;
  border: 1px solid #6fe1f433;
  border-radius: 11px;
  background: #6fe1f40a;
  padding: 13px;
}
.availability-own h3 {
  margin: 0 0 5px;
}
.availability-own p {
  margin: 0 0 10px;
  color: #91aeba;
  font-size: 11px;
}
.availability-own-grid {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
}
.feature-setup {
  border-left: 3px solid #f0bc74;
  background: #f0bc7410;
  padding: 11px 13px;
  color: #efcf9d;
  font-size: 12px;
  line-height: 1.5;
}
.backup-box {
  margin-top: 18px;
  border-top: 1px solid #add7ea22;
  padding-top: 16px;
}
.backup-box p {
  color: #91aeba;
}
.battle-status {
  display: inline-block;
  border-radius: 12px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: bold;
  background: #f0bc7420;
  color: #f2c78a;
}
.battle-status.completed {
  background: #6fe1b520;
  color: #91e8c1;
}
@media (max-width: 760px) {
  .battle-form-grid {
    grid-template-columns: 1fr;
  }
  .battle-form-grid textarea {
    grid-column: auto;
  }
  .availability-own-grid {
    grid-template-columns: 1fr;
  }
  .battle-editor-head {
    flex-direction: column;
  }
}
.battle-round-manager {
  margin-top: 14px;
  border: 1px solid #f0bc744d;
  border-radius: 12px;
  background: #241d1266;
  padding: 13px;
}
.battle-round-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.battle-round-head h3 {
  margin: 0;
  color: #ffe0a0;
}
.battle-round-head small {
  color: #c3aa77;
}
.battle-round-tabs {
  display: flex;
  gap: 6px;
  overflow: auto;
  padding-bottom: 8px;
}
.battle-round-tab {
  border: 1px solid #f0bc7444;
  border-radius: 8px;
  background: #241d12;
  color: #cfb47d;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 11px;
  font-weight: bold;
  white-space: nowrap;
}
.battle-round-tab.active,
.battle-round-tab:hover {
  border-color: #ffd477;
  background: #5a4018;
  color: #fff0c1;
}
.battle-round-card {
  border-top: 1px solid #f0bc7433;
  padding-top: 11px;
}
.battle-round-fields {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 8px;
}
.battle-round-fields select,
.battle-round-fields input,
.battle-round-fields textarea {
  width: 100%;
  border: 1px solid #f0bc7444;
  border-radius: 8px;
  background: #171812;
  color: #fff4d4;
  padding: 10px;
}
.battle-round-fields textarea {
  grid-column: 1/-1;
  min-height: 62px;
  resize: vertical;
}
.battle-round-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 9px;
}
.battle-round-actions > div {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.battle-round-summary {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.battle-round-chip {
  border: 1px solid #f0bc7444;
  border-radius: 12px;
  background: #f0bc7412;
  color: #f3cf92;
  padding: 4px 7px;
  font-size: 9px;
}
@media (max-width: 760px) {
  .battle-round-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .battle-round-fields {
    grid-template-columns: 1fr;
  }
  .battle-round-fields textarea {
    grid-column: auto;
  }
}
.calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
.calendar-panel {
  border: 1px solid #add7ea22;
  border-radius: 15px;
  background: linear-gradient(145deg, #123646dd, #071b29ee);
  padding: 18px;
}
.calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.calendar-head h2 {
  margin: 0;
}
.calendar-nav {
  display: flex;
  gap: 6px;
  align-items: center;
}
.calendar-nav button {
  min-width: 38px;
}
.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}
.calendar-weekdays span {
  text-align: center;
  color: #88a8b6;
  font-size: 10px;
  font-weight: bold;
  padding: 5px;
}
.calendar-day {
  min-height: 92px;
  border: 1px solid #add7ea1e;
  border-radius: 9px;
  background: #04172272;
  padding: 7px;
  color: #c8dce4;
}
.calendar-day.outside {
  opacity: 0.35;
}
.calendar-day.today {
  border-color: #6fe1f477;
}
.calendar-day-number {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: bold;
}
.calendar-event-chip {
  display: block;
  width: 100%;
  margin: 3px 0;
  border: 0;
  border-radius: 5px;
  background: #6fe1f41a;
  color: #bff5fb;
  padding: 5px;
  text-align: left;
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.calendar-event-chip:hover {
  background: #6fe1f42b;
}
.calendar-side {
  display: grid;
  align-content: start;
  gap: 12px;
}
.calendar-create {
  border: 1px solid #add7ea22;
  border-radius: 15px;
  background: #081f2d;
  padding: 16px;
}
.calendar-create h3 {
  margin: 0 0 11px;
}
.calendar-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.calendar-form input,
.calendar-form select,
.calendar-form textarea {
  width: 100%;
  border: 1px solid #add7ea33;
  border-radius: 8px;
  background: #041721;
  color: #eaf8fc;
  padding: 10px;
}
.calendar-form .wide {
  grid-column: 1/-1;
}
.calendar-form textarea {
  min-height: 74px;
  resize: vertical;
}
.calendar-events {
  display: grid;
  gap: 10px;
}
.calendar-event {
  border: 1px solid #add7ea22;
  border-radius: 12px;
  background: #061923;
  padding: 14px;
}
.calendar-event.past {
  opacity: 0.72;
}
.calendar-event-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}
.calendar-event h3 {
  margin: 0 0 5px;
}
.calendar-event p {
  margin: 5px 0;
  color: #94afbc;
  font-size: 11px;
  line-height: 1.45;
}
.calendar-current-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  border: 1px solid currentColor;
  border-radius: 14px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: bold;
}
.calendar-current-status.available {
  color: #9cf0cc;
  background: #6fe1b518;
}
.calendar-current-status.unsure {
  color: #f7d69f;
  background: #f0bc7418;
}
.calendar-current-status.unavailable {
  color: #ffb2b2;
  background: #ff737318;
}
.calendar-current-status.unknown {
  color: #9bddff;
  background: #58b9f018;
}
.traffic-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 9px currentColor;
}
.calendar-rsvp-admin {
  margin-top: 12px;
  border: 1px solid #58b9f033;
  border-radius: 9px;
  background: #58b9f00c;
  padding: 10px;
}
.calendar-rsvp-admin label {
  display: grid;
  gap: 6px;
  color: #9ec5d5;
  font-size: 10px;
  font-weight: bold;
}
.calendar-rsvp-admin select {
  width: 100%;
  border: 1px solid #58b9f044;
  border-radius: 7px;
  background: #061923;
  color: #eaf8fc;
  padding: 8px;
}
.calendar-rsvp {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 12px;
}
.calendar-rsvp button {
  border: 1px solid #add7ea33;
  border-radius: 8px;
  background: #071c28;
  color: #9db5c1;
  padding: 8px 5px;
  cursor: pointer;
  font-size: 10px;
  font-weight: bold;
}
.calendar-rsvp button.available {
  border-color: #6fe1b555;
  color: #9cf0cc;
}
.calendar-rsvp button.unsure {
  border-color: #f0bc7455;
  color: #f7d69f;
}
.calendar-rsvp button.unavailable {
  border-color: #ff888855;
  color: #ffb2b2;
}
.calendar-rsvp button.active.available {
  border-color: #6fe1b5;
  background: #6fe1b523;
  color: #9cf0cc;
}
.calendar-rsvp button.active.unsure {
  border-color: #f0bc74;
  background: #f0bc7422;
  color: #f4cd92;
}
.calendar-rsvp button.active.unavailable {
  border-color: #ff8888;
  background: #ff77771b;
  color: #ffb0b0;
}
.calendar-counts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.calendar-count {
  border: 1px solid currentColor;
  border-radius: 12px;
  background: #ffffff0a;
  padding: 4px 7px;
  color: #9cb7c2;
  font-size: 9px;
}
.calendar-count.available {
  color: #9cf0cc;
  background: #6fe1b512;
}
.calendar-count.unsure {
  color: #f7d69f;
  background: #f0bc7412;
}
.calendar-count.unavailable {
  color: #ffb2b2;
  background: #ff737312;
}
.calendar-count.unknown {
  color: #9bddff;
  background: #58b9f012;
}
.calendar-participants {
  margin-top: 9px;
  border-top: 1px solid #add7ea1b;
  padding-top: 8px;
  font-size: 10px;
  color: #8faab7;
}
.calendar-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.calendar-actions button {
  flex: 1;
}
.calendar-setup {
  margin-bottom: 14px;
}
@media (max-width: 900px) {
  .calendar-layout {
    grid-template-columns: 1fr;
  }
  .calendar-side {
    grid-row: auto;
  }
  .calendar-day {
    min-height: 72px;
  }
}
@media (max-width: 620px) {
  .calendar-weekdays,
  .calendar-grid {
    display: none;
  }
  .calendar-panel .calendar-head {
    margin-bottom: 0;
  }
  .calendar-form {
    grid-template-columns: 1fr;
  }
  .calendar-form .wide {
    grid-column: auto;
  }
}
/* Shared feedback, draft state and survey results. */
.app-notification {
  position: fixed;
  z-index: 100;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  width: min(720px, calc(100% - 24px));
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px;
  background: #0b2434;
  border: 1px solid #6fe1f477;
  border-radius: 12px;
  box-shadow: 0 8px 35px #0009;
  font-size: 14px;
}
.app-notification > span {
  flex: 1;
  min-width: 180px;
}
#battleDraftStatus {
  color: #ffd477;
  font-size: 14px;
  font-weight: bold;
}
.plan-warnings {
  border: 1px solid #f0bc7455;
  background: #f0bc7410;
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 12px;
  font-size: 14px;
}
.plan-warnings ul {
  margin-bottom: 0;
  padding-left: 22px;
}
.plan-warnings li {
  margin-top: 6px;
}
dialog.survey-results {
  color: #eaf8fc;
  width: min(920px, calc(100% - 24px));
  max-height: 90vh;
  overflow: auto;
  margin: auto;
  padding: 22px;
}
dialog::backdrop {
  background: #02090ddd;
}
.results-toolbar {
  display: flex;
  gap: 12px;
  align-items: end;
  flex-wrap: wrap;
}
.results-toolbar label {
  display: grid;
  gap: 6px;
  flex: 1;
}
.results-toolbar select {
  width: 100%;
}
.result-item {
  border: 1px solid #add7ea33;
  border-radius: 10px;
  margin: 10px 0;
}
.result-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  cursor: pointer;
  list-style: revert;
}
.result-item summary small {
  display: block;
  margin-top: 5px;
  color: #9eb9c7;
  font-size: 13px;
}
.result-counts {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 14px;
}
.result-names {
  padding: 0 14px 12px;
  border-top: 1px solid #add7ea22;
  overflow-wrap: anywhere;
}
.result-names p,
.results-note {
  font-size: 14px;
  line-height: 1.5;
}
.result-names small {
  font-size: 13px;
  color: #9eb9c7;
}
.survey-results button {
  min-height: 42px;
}
button:focus-visible,
summary:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid #6fe1f4;
  outline-offset: 3px;
}
.own-row [data-save-status] {
  margin-left: auto;
  font-size: 12px;
  max-width: 150px;
  color: #9edfc9;
}
@media (max-width: 600px) {
  .result-item summary {
    align-items: start;
    flex-direction: column;
  }
  .results-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .result-counts {
    gap: 14px;
  }
  .survey-results .survey-modal-head {
    gap: 8px;
  }
  .survey-results {
    padding: 14px !important;
  }
}

.selected-only { display: flex; align-items: center; gap: 8px; grid-column: 1 / -1; font-size: 13px; cursor: pointer; }
.selected-only input { accent-color: #65d7e7; }
.ship-swap { display: grid; gap: 8px; padding: 12px; color: #bce1e8; font-size: 13px; }
.ship-swap select { width: 100%; min-width: 0; padding: 10px; border: 1px solid #315563; border-radius: 8px; background: #081e2a; color: #e2f0f4; font: inherit; }
@media (max-width: 720px) {
  #plan .filters .select:nth-child(4) { grid-column: 1 / -1; }
}
.ship-swap > label:last-child { display: grid; gap: 8px; }
.ship-swap input[type="search"] { width: 100%; min-width: 0; box-sizing: border-box; padding: 10px; border: 1px solid #315563; border-radius: 8px; background: #081e2a; color: #e2f0f4; font: inherit; }
.swap-results:not([hidden]) { display: grid; gap: 6px; max-height: 240px; overflow-y: auto; }
.swap-result { width: 100%; padding: 10px; border: 1px solid #315563; border-radius: 8px; background: #102f3d; color: #e2f0f4; text-align: left; font: inherit; cursor: pointer; }
.swap-result:hover, .swap-result:focus-visible { background: #1a4656; border-color: #65d7e7; }
.app-notification > .survey-warn {
  font-size: 28px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.mobile-plan-switch { display: none; }
@media (max-width: 720px) {
  .mobile-plan-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  .mobile-plan-switch button { min-height: 48px; padding: 10px 8px; border: 1px solid #315563; border-radius: 10px; background: #081e2a; color: #bce1e8; font: inherit; font-size: 14px; cursor: pointer; }
  .mobile-plan-switch button[aria-pressed="true"] { background: #184452; color: #fff; border-color: #65d7e7; font-weight: 700; }
  .mobile-plan-switch button:focus-visible { outline: 2px solid #65d7e7; outline-offset: 2px; }
  .mobile-plan-switch span { display: inline-block; margin-left: 4px; font-size: 12px; }
  #plan[data-mobile-pane="ships"] #planLineupPanel,
  #plan[data-mobile-pane="lineup"] #planShipPanel { display: none; }
  #plan > .grid { grid-template-columns: minmax(0, 1fr); }
}

/* Aufgaben bleiben getrennt; die Farben werden nach rechts dunkler. */
#leaderViewTab { background: #f39943; color: #23170b; border: 1px solid #ffbd77; }
#leaderViewTab.active { background: #ffaf5e; color: #23170b; box-shadow: inset 0 -3px #ffe0b8; }
.admin-tabs { gap: 7px; flex-wrap: wrap; }
.admin-tabs button { background: var(--task-color); color: var(--task-ink, #f5fbff); border: 1px solid #ffffff38; border-radius: 10px; }
.admin-tabs button:nth-child(1) { --task-color: #c6ebe6; --task-ink: #102e35; }
.admin-tabs button:nth-child(2) { --task-color: #a1d5e3; --task-ink: #102e35; }
.admin-tabs button:nth-child(3) { --task-color: #7cb4d4; --task-ink: #0b2636; }
.admin-tabs button:nth-child(4) { --task-color: #598db9; }
.admin-tabs button:nth-child(5) { --task-color: #536c9b; }
.admin-tabs button:nth-child(6) { --task-color: #514d78; }
.admin-tabs button:nth-child(7) { --task-color: #38374f; }
.admin-tabs button.active { background: var(--task-color); color: var(--task-ink, #f5fbff); box-shadow: inset 0 -4px #ffffffb3; outline: 2px solid #d7faff; outline-offset: 1px; }
.admin-tabs button:hover { filter: brightness(1.12); }
.admin-tabs button:focus-visible, #leaderViewTab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.account-suspended { display: block; color: #ffd29b; margin-top: 6px; }
.survey-deadline { display: block; margin: 14px 0; }
.survey-deadline input { margin-top: 6px; }
.tabs button[data-view="plan"] { background: #e8d67d; color: #29230d; border: 1px solid #f8e8a6; }
.tabs button[data-view="plan"].active { background: #f6df79; color: #29230d; box-shadow: inset 0 -3px #fff4bc; }
.tabs button[data-view="plan"]:hover { background: #ffec9c; }
.tabs button[data-view="plan"]:focus-visible { outline: 3px solid #fff4bc; outline-offset: 3px; }
.tabs button[data-view="tactics"] { background: #57c7bd; color: #082c30; border: 1px solid #92e5da; }
.tabs button[data-view="tactics"].active { background: #78ddd0; color: #082c30; box-shadow: inset 0 -3px #c5fff3; }
.tabs button[data-view="tactics"]:hover { background: #92e5da; }
.tabs button[data-view="tactics"]:focus-visible { outline: 3px solid #c5fff3; outline-offset: 3px; }

/* Namen und Verfügbarkeit getrennt lesen, auch bei langen Spielernamen. */
.assignment { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.assignment-role { display: block; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; opacity: .8; margin-bottom: 3px; }
.assignment-player { display: block; }
.assignment .availability-badge { margin: 4px 0 0; font-style: normal; }
.candidate-info, .lineup-name { min-width: 0; overflow-wrap: anywhere; }
.candidate .candidate-name { display: block; }

@media (max-width: 720px) {
  main { padding-left: 12px; padding-right: 12px; }
  #plan .grid, #plan .panel, #plan .battle-editor, #plan .battle-workspace { min-width: 0; }
  #plan .panel { padding: 16px 12px; }
  #plan .panel-head { flex-wrap: wrap; gap: 10px; }
  #plan .panel-head h2 { font-size: 22px; }
  .mobile-plan-switch button { font-size: 15px; min-height: 52px; }
  #plan input:not([type="checkbox"]), #plan select, #plan textarea { font-size: 16px; min-width: 0; max-width: 100%; }
  #plan input:not([type="checkbox"]), #plan select { min-height: 48px; }
  #plan button { min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
  #plan button:focus-visible, #plan summary:focus-visible { outline: 3px solid #6fe1f4; outline-offset: 2px; }
  .lineup-ship summary { grid-template-columns: 16px minmax(0, 1fr); gap: 12px 8px; padding: 14px 12px; }
  .lineup-name b { font-size: 17px; }
  .lineup-name small { font-size: 12px; line-height: 1.5; }
  .lineup-ship .assignment { grid-column: 1 / -1; justify-self: stretch; width: 100%; padding: 10px 12px; border-radius: 10px; font-size: 15px; line-height: 1.45; }
  .assignment-role { font-size: 11px; }
  .assignment .availability-badge { font-size: 12px; padding: 3px 8px; }
  .candidate-list { padding: 0 10px 12px; gap: 10px; }
  .candidate { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; min-height: 64px; }
  .candidate .candidate-name { font-size: 16px; line-height: 1.45; }
  .candidate .availability-badge { margin: 6px 0 0; font-size: 12px; font-style: normal; padding: 4px 8px; }
  .candidate small { font-size: 12px; line-height: 1.4; }
  .candidate .candidate-state { text-align: left; font-size: 12px !important; margin-top: 0; }
  .candidate-heading { flex-wrap: wrap; gap: 4px; line-height: 1.4; }
  .ship-swap { min-width: 0; }
  .ship-swap label { overflow-wrap: anywhere; line-height: 1.45; }
  .swap-results button { width: 100%; text-align: left; }
  .lineup-final-head { gap: 14px; }
  .lineup-final h3 { font-size: 18px; }
  .lineup-actions { display: grid; grid-template-columns: 1fr; width: 100%; gap: 8px; }
  #plan .lineup-actions button { width: 100%; min-height: 48px; padding: 12px; font-size: 14px; }
  .lineup-actions #downloadLineupImage { background: #1b5263; color: #eaffff; border-color: #6fe1f4; font-weight: 700; }
  .final-row { gap: 8px; padding: 14px 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
  .final-row > span { color: #e6f0f5; font-size: 16px; font-weight: 700; }
  .final-row strong { min-width: 0; }
  .battle-editor { padding: 14px 12px; }
  .battle-editor-head, .battle-round-head, .battle-round-actions { flex-direction: column; align-items: stretch; }
  .battle-form-grid, .battle-round-fields { grid-template-columns: minmax(0, 1fr); }
  .battle-round-tabs { flex-wrap: wrap; }
  .battle-round-tabs button { max-width: 100%; text-align: left; }
  .battle-round-actions > div, .battle-toolbar > div { display: grid; grid-template-columns: 1fr; width: 100%; gap: 8px; }
  .battle-toolbar label { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; line-height: 1.4; }
  .battle-toolbar input[type="checkbox"] { flex-shrink: 0; width: 20px; height: 20px; }
  .admin-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; padding: 8px; }
  .admin-tabs button { min-width: 0; min-height: 48px; white-space: normal; overflow-wrap: anywhere; font-size: 14px; line-height: 1.35; padding: 10px; }
}

@media (max-width: 720px) {
  .final-row strong.open-slot::before { content: none; }
}

#plan [hidden] { display: none !important; }
.wizard-steps { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 24px; }
.wizard-steps button { display: flex; align-items: center; gap: 8px; background: #0a202c; color: #c3dbe5; border: 1px solid #41606e; border-radius: 10px; padding: 10px 14px; min-height: 44px; cursor: pointer; }
.wizard-steps button span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #1b4050; }
.wizard-steps button[aria-current="step"] { background: #285764; border-color: #79e0ec; color: white; font-weight: 700; }
.wizard-editor label, .wizard-field { display: grid; gap: 7px; color: #c5dce5; font-size: 14px; }
.wizard-term-fields { grid-template-columns: 2fr 1fr 1fr; }
.wizard-wide { grid-column: 1 / -1; }
.wizard-optional { margin: 16px 0; padding: 12px; border: 1px solid #ffffff24; border-radius: 10px; }
.wizard-optional summary { cursor: pointer; padding: 5px 0; color: #b9dbe5; }
.wizard-optional[open] summary { margin-bottom: 12px; }
.wizard-editor input, .wizard-editor select, .wizard-editor textarea { min-width: 0; width: 100%; background: #061923; color: #eaf8fc; border: 1px solid #a9ddeb33; border-radius: 8px; padding: 11px; font: inherit; }
.wizard-editor input[type="checkbox"] { width: auto; }
.wizard-editor textarea { min-height: 85px; resize: vertical; }
.wizard-map-layout { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 24px; margin-top: 16px; }
.wizard-map-preview { margin: 0; min-width: 0; }
.wizard-map-preview img { width: 100%; height: auto; border-radius: 10px; }
.wizard-map-preview figcaption { color: #a2bfcd; font-size: 11px; line-height: 1.5; }
.wizard-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding: 16px 0 0; border-top: 1px solid #ffffff24; }
#plan > .wizard-footer { padding: 16px; background: #0b2533; border: 1px solid #3c6474; border-radius: 12px; }
.wizard-footer span { color: #a6c5d2; font-size: 13px; }
.wizard-review-round { border-top: 1px solid #ffffff24; margin-top: 20px; padding-top: 10px; }
.wizard-review-round ul { padding: 0; list-style: none; }
.wizard-review-round li { display: grid; gap: 4px; padding: 10px 0; overflow-wrap: anywhere; }
.wizard-review-round li span { color: #b1cbd6; font-size: 13px; }
.wizard-review-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.wizard-save { margin-top: 20px; }
.wizard-editor [data-wizard-panel] > p { color: #bdd2dc; line-height: 1.6; }
@media (max-width:720px) {
  .wizard-steps { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-bottom: 18px; }
  .wizard-steps button { min-width: 0; padding: 9px; text-align: left; font-size: 13px; }
  .wizard-steps button span { flex-shrink: 0; }
  .wizard-term-fields, .wizard-map-layout { grid-template-columns: minmax(0,1fr); }
  .wizard-map-preview { max-width: 280px; }
  .wizard-review-actions { display: grid; grid-template-columns: minmax(0,1fr); }
  .wizard-review-actions button, .wizard-save { width: 100%; min-height: 48px; }
  .wizard-footer { flex-wrap: wrap; }
  .wizard-footer button { min-height: 48px; flex: 1; }
  .wizard-footer span { width: 100%; order: -1; text-align: center; }
}
.wizard-single-field { max-width: 650px; margin: 22px 0; }
.wizard-steps { flex-wrap: nowrap; overflow-x: auto; padding: 3px 2px 10px; scrollbar-width: thin; }
.wizard-steps button { flex-shrink: 0; }
@media (max-width:720px) {
  .wizard-steps { display: flex; }
}
.wizard-steps { gap: 6px; scrollbar-color: #416b7a #0c2636; }
.wizard-steps button { font-size: 12px; padding: 8px 10px; }
@media (max-width:720px) { .wizard-steps button { font-size: 13px; } }
.wizard-datetime { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 650px; margin: 22px 0; }
@media (max-width:480px) { .wizard-datetime { grid-template-columns: minmax(0,1fr); } }
/* Captain choice and the five selectable skill rows. */
.captain-editor { grid-column: 1 / -1; min-width: 0; padding: 16px; margin: 8px 0 16px; border: 1px solid rgba(100,210,230,.28); border-radius: 12px; background: rgba(8,36,52,.65); }
.captain-editor h3 { margin: 0 0 12px; font-size: 16px; }
.captain-editor label { display: grid; gap: 7px; min-width: 0; color: #c8dce5; font-size: 13px; }
.captain-editor select { width: 100%; min-width: 0; min-height: 44px; padding: 10px; border: 1px solid #34576a; border-radius: 8px; background: #0b2434; color: #eff8ff; font-size: 16px; }
.captain-skill-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); gap: 12px; margin: 14px 0; }
.captain-skill-grid label:last-child { grid-column: 1 / -1; }
.captain-default-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.captain-default-bar small { flex: 1 1 220px; overflow-wrap: anywhere; color: #b5d1db; }
.captain-source { display: block; margin-top: 12px; color: #a2b9c5; }
.captain-source a { color: #83d9e9; }
.final-captain { grid-column: 1 / -1; display: block; flex-basis: 100%; color: #a8d9e4; white-space: normal; overflow-wrap: anywhere; line-height: 1.6; }
.final-captain:empty { display: none; }
@media(max-width: 600px) { .captain-skill-grid { grid-template-columns: minmax(0,1fr); } .captain-editor { padding: 12px; } }
.captain-tree-fields { min-width: 0; margin: 8px 0; padding: 14px; border: 1px solid #34576a; border-radius: 10px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.captain-tree-fields legend { padding: 0 6px; font-weight: 700; color: #d5eaf2; }
.captain-tree-fields p { grid-column: 1 / -1; margin: 0; color: #b1cbd6; font-size: 13px; line-height: 1.5; }
.captain-tree-fields label { display: grid; gap: 7px; min-width: 0; color: #d0e4ec; font-size: 14px; }
.captain-tree-fields textarea { box-sizing: border-box; width: 100%; min-width: 0; min-height: 88px; resize: vertical; padding: 10px; border: 1px solid #34576a; border-radius: 8px; background: #0b2434; color: #eff8ff; font: inherit; font-size: 16px; line-height: 1.5; }
.captain-tree-fields label:last-child { grid-column: 1 / -1; }
@media(max-width:600px) { .captain-tree-fields { grid-template-columns: minmax(0,1fr); } }
.captain-search { display: grid; gap: 8px; min-width: 0; margin-bottom: 14px; }
.captain-search > label { color: #d0e4ec; font-size: 14px; font-weight: 600; }
.captain-search input { box-sizing: border-box; width: 100%; min-width: 0; padding: 12px; min-height: 44px; border: 1px solid #427c91; border-radius: 8px; background: #0b2434; color: #eff8ff; font-size: 16px; }
.captain-search > small { color: #b1cbd6; font-size: 12px; }
.captain-search-results { max-height: 280px; overflow-y: auto; display: grid; gap: 5px; }
.captain-search-results[hidden] { display: none; }
.captain-search-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 11px; border: 1px solid #34576a; border-radius: 8px; background: #123345; color: #eff8ff; cursor: pointer; text-align: left; }
.captain-search-result b { overflow-wrap: anywhere; }
.captain-search-result small { color: #a8cdd9; }
.captain-search-result:hover, .captain-search-result:focus-visible { border-color: #76e3f1; background: #1a4b5e; }

/* Persönliche Antwort und Trainingsstufe sind getrennt gekennzeichnet. */
.calendar-summary { margin-bottom: 1rem; padding: 1rem; border: 1px solid #40536c; border-radius: 10px; }
.calendar-summary h3 { margin: .4rem 0; }
.calendar-summary-link { display: inline-block; margin: .25rem .5rem .25rem 0; text-align: left; cursor: pointer; }
.calendar-event-chip.unknown { border-left: 5px solid #e4b52d; background: #594b1c; }
.calendar-event-chip.available { border-left: 5px solid #51c777; background: #24563a; }
.calendar-event-chip.unavailable { border-left: 5px solid #ed7171; background: #633133; }
.training-badge { display: inline-block; margin: .4rem 0; font-weight: 600; }
.training-dot.green, .training-badge.green { color: #66d48a; }
.training-dot.yellow, .training-badge.yellow { color: #f2d05c; }
.training-dot.red, .training-badge.red { color: #ff8585; }
.calendar-change { padding: .5rem; margin: .5rem 0; border: 1px solid #e4b52d; border-radius: 6px; }

/* Große, lesbare Termine über die volle Kalenderbreite. */
.calendar-layout { gap: 28px; }
.calendar-side { min-width: 0; gap: 24px; }
.calendar-panel { padding: 24px; }
.calendar-weekdays span { font-size: 14px; padding: 10px 4px; }
.calendar-day { min-width: 0; min-height: 145px; padding: 10px; }
.calendar-day-number { font-size: 15px; margin-bottom: 10px; }
.calendar-event-chip {
  padding: 10px 8px; min-height: 64px; font-size: 14px; font-weight: 600;
  line-height: 1.5; white-space: normal; overflow-wrap: anywhere;
  color: #f2f7fb; border-radius: 8px;
}
.calendar-events { gap: 20px; }
.calendar-event { padding: 28px; scroll-margin-top: 110px; }
.calendar-event h3 { font-size: 24px; line-height: 1.3; overflow-wrap: anywhere; }
.calendar-event p { font-size: 16px; line-height: 1.65; margin: 10px 0; }
.calendar-event-head p { font-size: 18px; color: #d7e8ee; }
.calendar-event .training-badge { font-size: 17px; margin: 10px 0; }
.calendar-event .battle-status, .calendar-event .battle-round-chip { font-size: 13px; padding: 6px 10px; }
.calendar-current-status { font-size: 15px; padding: 9px 13px; }
.calendar-current-status.unknown { color: #f2d05c; background: #e4b52d18; }
.calendar-rsvp { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 600px; gap: 12px; margin: 18px 0; }
.calendar-event button { min-height: 46px; font-size: 15px; padding: 11px 16px; }
.calendar-rsvp-admin { padding: 18px; }
.calendar-rsvp-admin label, .calendar-event select { font-size: 16px; }
.calendar-event select { max-width: 100%; padding: 10px; }
.calendar-counts { gap: 10px; margin: 14px 0; }
.calendar-count, .calendar-participants { font-size: 15px; }
.calendar-summary { padding: 24px; }
.calendar-summary h3 { font-size: 20px; margin: 8px 0 12px; }
.calendar-summary-link, .calendar-change button {
  border: 1px solid #76c6df66; border-radius: 8px; background: #103040;
  color: #eaf8fc; padding: 11px 14px; font: inherit; line-height: 1.5;
}
.calendar-summary-link { font-size: 16px; }
.calendar-summary-link:hover, .calendar-change button:hover { background: #1c4558; }
.calendar-summary-link:focus-visible, .calendar-event-chip:focus-visible { outline: 3px solid #89e9ff; outline-offset: 3px; }
@media (min-width: 621px) and (max-width: 900px) {
  .calendar-day { min-height: 125px; padding: 6px; }
  .calendar-event-chip { font-size: 12px; padding: 7px 5px; }
}
@media (max-width: 620px) {
  .calendar-panel { padding: 16px; }
  .calendar-event, .calendar-summary { padding: 20px; }
  .calendar-event h3 { font-size: 21px; }
  .calendar-event-head { flex-wrap: wrap; }
  .calendar-summary-link { width: 100%; margin-right: 0; }
  .calendar-change { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
}
.calendar-layout { grid-template-columns: minmax(0, 1fr); }
.calendar-panel, .calendar-side > section, .calendar-event { min-width: 0; }
@media (max-width: 620px) {
  .calendar-panel .calendar-head { flex-wrap: wrap; }
  .calendar-event button { overflow-wrap: anywhere; }
}

/* Trainingsfarbe als beschrifteter, durchgehender Balken. */
.training-badge {
  display: block; width: 100%; min-height: 44px; padding: 11px 16px;
  border: 1px solid #ffffff30; border-radius: 8px;
  font-size: 16px; font-weight: 800; line-height: 1.4; text-align: left;
}
.training-badge.green { color: #052614; background: #66d48a; }
.training-badge.yellow { color: #302500; background: #f2d05c; }
.training-badge.red { color: #340a0a; background: #ff8585; }
.calendar-event .training-badge { margin: 16px 0; padding: 13px 18px; font-size: 18px; }
.calendar-event-chip .training-badge {
  margin: 9px 0 0; min-height: 30px; padding: 6px;
  border-radius: 5px; font-size: 12px; line-height: 1.35;
}
.calendar-summary > .training-badge { margin: 12px 0 18px; }

/* Die Ampelfarben gelten ausschließlich für die Trainingsfarbe. */
.calendar-event-chip.unknown,
.calendar-event-chip.available,
.calendar-event-chip.unavailable {
  border-left: 0; border: 1px solid #7093a766; background: #122b3b; color: #eef6fb;
}
.calendar-event-chip:hover { background: #1b3b4e; }
.calendar-chip-response { display: block; margin-top: 9px; font-size: 12px; color: #dce8f0; }
.calendar-current-status.available,
.calendar-current-status.unavailable,
.calendar-current-status.unknown,
.calendar-count.available,
.calendar-count.unavailable,
.calendar-count.unknown {
  color: #e0e9f0; background: #203545; border-color: #7b94a5;
}
.calendar-rsvp button.available, .calendar-rsvp button.unavailable {
  color: #dfeaf2; background: #102431; border-color: #7891a3;
}
.calendar-rsvp button.active.available, .calendar-rsvp button.active.unavailable {
  color: #10202c; background: #dce9f2; border: 2px solid #ffffff;
  box-shadow: 0 0 0 2px #a3bdd033;
}
.calendar-rsvp button:hover { outline: 2px solid #93b6cd; outline-offset: 2px; }

/* Teilnahme-Symbole stehen groß und mittig über ihrer Beschriftung. */
.calendar-current-status {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  width: 100%; max-width: 600px; min-height: 142px; gap: 8px;
  margin: 20px 0 14px; padding: 18px; border-radius: 12px; text-align: center;
}
.calendar-participation-heading { font-size: 13px; font-weight: 500; color: #bed0dd; }
.calendar-participation-symbol {
  display: grid; place-items: center; width: 56px; height: 56px;
  border: 2px solid #b8cddd; border-radius: 50%;
  background: #102431; color: #f4f8fc; font-size: 34px; font-weight: 800; line-height: 1;
}
.calendar-current-status strong { font-size: 18px; }
.calendar-rsvp button {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; min-height: 108px; padding: 16px; text-align: center;
}
.calendar-rsvp-symbol { display: block; font-size: 36px; font-weight: 800; line-height: 1; }
.calendar-chip-response { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.calendar-chip-symbol { font-size: 26px; font-weight: 800; line-height: 1.2; }
.calendar-current-status, .calendar-rsvp { margin-left: auto; margin-right: auto; }

/* Dichte Terminkarten mit kompakter Teilnahmezeile. */
.calendar-layout { gap: 18px; }
.calendar-side, .calendar-events { gap: 12px; }
.calendar-panel { padding: 18px; }
.calendar-day { min-height: 100px; padding: 7px; }
.calendar-day-number { font-size: 13px; margin-bottom: 6px; }
.calendar-event-chip { min-height: 0; padding: 7px; font-size: 12px; line-height: 1.4; }
.calendar-event-chip .training-badge { min-height: 0; margin-top: 6px; padding: 4px 6px; font-size: 11px; }
.calendar-chip-response { flex-direction: row; justify-content: center; gap: 6px; margin-top: 6px; font-size: 11px; }
.calendar-chip-symbol { font-size: 18px; }
.calendar-event { padding: 16px; }
.calendar-event h3 { font-size: 20px; line-height: 1.3; }
.calendar-event p { margin: 6px 0; font-size: 14px; line-height: 1.45; }
.calendar-event-head { gap: 10px; }
.calendar-event-head p { font-size: 14px; }
.calendar-event .training-badge { min-height: 30px; padding: 6px 10px; margin: 10px 0; font-size: 14px; }
.calendar-event .battle-status, .calendar-event .battle-round-chip { padding: 4px 7px; font-size: 11px; }
.calendar-event button { min-height: 36px; padding: 7px 11px; font-size: 13px; }
.calendar-event select { padding: 7px 8px; font-size: 14px; }
.calendar-event > label { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; }
.calendar-current-status {
  flex-direction: row; flex-wrap: wrap; width: fit-content; min-height: 40px;
  gap: 8px; margin: 10px auto; padding: 6px 10px; border-radius: 8px;
}
.calendar-participation-heading { font-size: 12px; }
.calendar-participation-symbol { width: 28px; height: 28px; border-width: 1px; font-size: 20px; }
.calendar-current-status strong { font-size: 14px; }
.calendar-rsvp { max-width: 360px; gap: 8px; margin: 8px auto; }
.calendar-rsvp button { flex-direction: row; gap: 7px; min-height: 40px; padding: 7px 12px; }
.calendar-rsvp-symbol { font-size: 22px; }
.calendar-rsvp-admin {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.8fr) minmax(230px,1fr);
  align-items: end; gap: 10px; margin-top: 10px; padding: 10px;
}
.calendar-rsvp-admin label { font-size: 12px; gap: 5px; }
.calendar-rsvp-admin select { min-height: 38px; padding: 7px 8px; font-size: 14px; }
.calendar-rsvp-admin .calendar-current-status { width: 100%; margin: 0; min-height: 40px; justify-content: center; }
.calendar-rsvp-admin .calendar-participation-heading { display: none; }
.calendar-rsvp-admin .calendar-rsvp { max-width: none; width: 100%; margin: 0; }
.calendar-counts { gap: 6px; margin: 9px 0; }
.calendar-count { padding: 4px 7px; font-size: 12px; }
.calendar-participants { margin-top: 8px; padding-top: 8px; font-size: 13px; }
.calendar-actions { margin: 8px 0; gap: 8px; }
.calendar-actions button { flex: 0 1 auto; }
.calendar-change { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 7px 10px; font-size: 13px; }
.calendar-summary { padding: 14px; margin-bottom: 14px; }
.calendar-summary h3 { font-size: 16px; margin: 5px 0 8px; }
.calendar-summary-link { padding: 7px 10px; font-size: 14px; }
.calendar-summary > .training-badge { width: fit-content; min-height: 0; padding: 5px 10px; margin: 8px 0 12px; font-size: 13px; }
@media(max-width:900px) {
  .calendar-rsvp-admin { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .calendar-rsvp-admin > label { grid-column: 1 / -1; }
}
@media(max-width:620px) {
  .calendar-event { padding: 12px; }
  .calendar-event h3 { font-size: 18px; }
  .calendar-rsvp-admin { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .calendar-rsvp-admin .calendar-current-status { justify-self: center; width: fit-content; }
  .calendar-rsvp-admin select, .calendar-lineup-row select { font-size: 16px; }
  .calendar-event button { min-height: 40px; }
}

/* Kompakte Aufstellung im Kalendereintrag. */
.calendar-lineup { margin: 18px 0; padding: 14px; border: 1px solid #708fa466; border-radius: 10px; background: #0d2433; }
.calendar-lineup h3 { margin: 0; font-size: 18px; line-height: 1.35; }
.calendar-lineup p { margin: 8px 0; font-size: 13px; line-height: 1.45; }
.calendar-lineup-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.calendar-lineup-heading > span { color: #bdd1de; font-size: 12px; }
.calendar-lineup-rounds, .calendar-lineup-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.calendar-lineup button { min-height: 36px; padding: 7px 10px; font-size: 13px; }
.calendar-lineup-rounds button[aria-pressed="true"] { background: #dce9f2; color: #10202c; border-color: #fff; }
.calendar-lineup-rows { display: grid; gap: 8px; }
.calendar-lineup-row { display: grid; grid-template-columns: auto minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid #7797ac44; border-radius: 8px; }
.calendar-lineup-position { font-size: 12px; }
.calendar-lineup-row label { display: grid; min-width: 0; gap: 4px; font-size: 12px; }
.calendar-lineup-row select, .calendar-lineup-ship-picker input {
  width: 100%; min-width: 0; min-height: 36px; padding: 7px 8px;
  border: 1px solid #7a9aaf; border-radius: 6px; color: #eef7fc;
  background: #071b28; font: inherit; font-size: 13px;
}
.calendar-lineup-ship-picker { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: end; gap: 4px 8px; min-width: 0; }
.calendar-lineup-ship-picker input:focus-visible { outline: 2px solid #89e9ff; outline-offset: 2px; }
.calendar-lineup-ship-picker small { grid-column: 1 / -1; min-height: 15px; color: #bed0dd; font-size: 11px; line-height: 1.35; }
.calendar-lineup .notice { font-size: 13px; margin: 6px 0 0; }
.calendar-lineup .notice:empty { display: none; }
@media(max-width:900px) {
  .calendar-lineup-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .calendar-lineup-position, .calendar-lineup-ship-picker { grid-column: 1 / -1; }
  .calendar-lineup-row > button { justify-self: start; }
}
@media(max-width:620px) {
  .calendar-lineup { padding: 12px; }
  .calendar-lineup h3 { font-size: 17px; }
  .calendar-lineup-row { gap: 8px; }
  .calendar-lineup-row select, .calendar-lineup-ship-picker input { min-height: 40px; font-size: 16px; }
  .calendar-lineup button { min-height: 40px; }
  .calendar-lineup-actions { display: grid; grid-template-columns: minmax(0,1fr); }
}
@media(max-width:400px) {
  .calendar-lineup-row, .calendar-lineup-ship-picker { grid-template-columns: minmax(0,1fr); }
}

.calendar-rsvp-management { margin: 10px 0 6px; }
.calendar-rsvp-management > summary { cursor: pointer; color: #c5dce8; font-size: 13px; padding: 6px 0; }
.calendar-rsvp-management > summary:focus-visible { outline: 2px solid #89e9ff; outline-offset: 2px; }
.calendar-lineup.calendar-lineup-closed { margin: 8px 0; padding: 0; border: 0; background: none; }

/* Treffer öffnen sich während der Eingabe direkt unter der Schiffssuche. */
.calendar-ship-search-box { position: relative; min-width: 0; }
.calendar-ship-results {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20;
  width: max(100%, 240px); max-width: calc(100vw - 64px); max-height: 240px;
  overflow-y: auto; padding: 4px; border: 1px solid #7ca5bc; border-radius: 8px;
  background: #102b3b; box-shadow: 0 10px 24px #0008;
}
.calendar-ship-results[hidden] { display: none; }
.calendar-lineup .calendar-ship-results button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 38px; padding: 8px 10px; border: 0; border-radius: 5px;
  text-align: left; color: #edf6fc; background: transparent; cursor: pointer;
}
.calendar-ship-results button b { overflow-wrap: anywhere; font-size: 14px; }
.calendar-ship-results button small { min-height: 0; color: #c3d6e2; font-size: 12px; }
.calendar-lineup .calendar-ship-results button:hover,
.calendar-lineup .calendar-ship-results button[aria-selected="true"] { background: #2a5067; }
.calendar-lineup .calendar-ship-results p { margin: 4px; padding: 8px; font-size: 13px; }

.survey-recipient-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px; max-height:280px; overflow:auto; padding:12px 0; }
.survey-recipient-list label { display:flex; align-items:center; gap:8px; overflow-wrap:anywhere; }

.survey-fold > summary { cursor:pointer; padding:8px 0; overflow-wrap:anywhere; }
.survey-fold > summary span { margin-left:14px; color:var(--muted,#9ab7c4); font-size:.9rem; }
.survey-fold[open] > summary { margin-bottom:16px; }
.survey-fold > summary:focus-visible { outline:2px solid #86d8e1; outline-offset:4px; }


.home-welcome { margin-bottom: 20px; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 20px; }
.home-grid h3 { margin: 22px 0 10px; }
.home-grid p { line-height: 1.6; }
.home-tasks button { margin: 6px 8px 6px 0; }
.home-task, .home-note { padding: 14px; margin: 16px 0; border: 1px solid #315463; border-radius: 12px; background: #0b202b; }
.home-task h3, .home-note h3 { margin-top: 0; }
.home-lineup { list-style: none; padding: 0; }
.home-lineup li { border-top: 1px solid #315463; padding: 14px 0; }
.home-lineup li>div { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.home-lineup p { margin: 8px 0; }
.home-lineup small { color: #a6c0cd; }
@media(max-width: 760px) { .home-grid { grid-template-columns: minmax(0, 1fr); } }

/* Taktikzentrale */
.tactics-heading,.tactics-detail-head,.tactics-library-title{display:flex;justify-content:space-between;align-items:center;gap:16px}.tactics-heading{padding:14px 0 24px}.tactics-heading h2{font-size:30px;margin:0}.tactics-heading p:last-child{color:var(--muted);margin-bottom:0}.tactics-access{padding:10px 14px;border:1px solid #6fe1f43b;border-radius:24px;color:var(--cyan);background:#6fe1f40a;font-size:12px}.tactics-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:20px;align-items:start}.tactics-library{padding:16px;position:sticky;top:90px}.tactics-library h3{margin:0}.tactics-search{display:grid;gap:8px;margin:20px 0 14px;font-size:12px;color:var(--muted)}.tactics-search input,.tactic-form-grid input,.tactic-form-grid select,.tactic-marker-editor input,.tactic-marker-editor textarea,.tactic-orders textarea{width:100%;min-width:0;background:#061724;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:11px;font:inherit}.tactic-map-list{display:grid;gap:7px;max-height:680px;overflow:auto;scrollbar-width:thin}.tactic-map-card{display:flex;align-items:center;gap:10px;width:100%;padding:7px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--ink);text-align:left;cursor:pointer}.tactic-map-card img{width:50px;height:50px;border-radius:5px;object-fit:cover}.tactic-map-card>span:nth-child(2){flex:1;min-width:0}.tactic-map-card b,.tactic-map-card small{display:block;overflow-wrap:anywhere}.tactic-map-card small{color:var(--muted);margin-top:6px;font-size:11px}.tactic-map-card.chosen,.tactic-map-card:hover{background:#6fe1f410;border-color:#6fe1f450}.tactics-workspace{min-width:0;padding:24px}.tactics-detail-head h2{font-size:26px;margin:0}.tactic-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.tactic-actions button{min-height:40px}.tactic-variants{display:flex;gap:8px;overflow:auto;padding:18px 0;margin-top:10px}.tactic-variants button{min-width:180px;text-align:left;border:1px solid var(--line);border-radius:9px;padding:12px;background:#061724;color:var(--ink);cursor:pointer}.tactic-variants small{display:block;color:var(--muted);margin-top:7px}.tactic-variants .chosen{border-color:var(--cyan);background:#6fe1f40d}.tactic-title{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 18px}.tactic-title h3{width:100%;font-size:22px;margin:0 0 4px;overflow-wrap:anywhere}.tactic-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:10px 0 18px}.tactic-form-grid label:first-child{grid-column:1/-1}.tactic-form-grid label,.tactic-marker-editor label,.tactic-orders label{display:grid;gap:8px;color:var(--muted);font-size:12px}.tactic-status{min-height:18px;color:var(--amber);line-height:1.6;white-space:pre-wrap}.tactic-toolbar{display:flex;flex-wrap:wrap;gap:6px;border-top:1px solid var(--line);padding-top:14px}.tactic-toolbar button{background:#061724;border:1px solid var(--line);color:var(--ink);padding:9px;border-radius:7px;cursor:pointer}.tactic-toolbar button[aria-pressed=true]{background:#6fe1f423;border-color:var(--cyan);color:var(--cyan)}.tactic-help{font-size:12px;color:var(--muted);line-height:1.6}.tactic-figure{margin:16px 0 0}.tactic-board{position:relative;aspect-ratio:1;isolation:isolate;background:#061724;border:1px solid #6fe1f433;border-radius:12px;touch-action:pan-y;user-select:none;overflow:hidden}.tactic-board.editable{touch-action:none}.tactic-board.drawing{cursor:crosshair;touch-action:none}.tactic-terrain{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.tactic-board svg,.tactic-board #tacticMarkers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.tactic-board svg{filter:drop-shadow(0 1px 2px #000)}.tactic-marker{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;background:none;border:0;padding:0;color:var(--marker-color);pointer-events:auto;cursor:pointer;max-width:30%;font:inherit}.tactic-marker>span{display:grid;place-items:center;width:32px;height:32px;border:2px solid var(--marker-color);border-radius:50%;background:#06111cf0;font-size:20px;box-shadow:0 2px 12px #0009}.tactic-marker>b{font-size:11px;line-height:1.3;color:#fff;background:#06111ce8;border-radius:4px;padding:3px 5px;margin-top:3px;max-width:100%;overflow-wrap:anywhere}.tactic-marker.cap>span{width:45px;height:45px;background:#c6b0ff25;border-style:dashed}.tactic-marker.selected>span{outline:2px solid #fff;outline-offset:3px}.tactic-figure figcaption{font-size:10px;color:var(--muted);line-height:1.6;margin-top:9px}.tactic-briefing{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:26px;border-top:1px solid var(--line);padding-top:24px}.tactic-briefing>section{min-width:0}.tactic-roster-row{display:flex;align-items:flex-start;gap:10px;padding:13px 8px;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);color:var(--ink);background:transparent;cursor:pointer}.tactic-roster-row.chosen{background:#6fe1f40c}.tactic-slot{font-size:11px;white-space:nowrap;padding-top:3px}.tactic-roster-row b,.tactic-roster-row small{display:block;overflow-wrap:anywhere}.tactic-roster-row small{color:var(--muted);line-height:1.6;margin-top:5px;white-space:pre-wrap}.tactic-marker-editor{margin-top:16px;background:#061724;padding:15px;border:1px solid var(--line);border-radius:10px;display:grid;gap:13px}.tactic-marker-editor h3{margin:0}.tactic-coordinates{display:flex;gap:12px}.tactic-coordinates>*{min-width:0;flex:1}.tactic-orders{display:grid;gap:14px;align-content:start}.tactic-orders h3{margin:0;font-size:15px}.tactic-prose{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8;color:#b7cbd7;margin:0 0 16px}.tactic-orders textarea{resize:vertical;line-height:1.6}.tactic-orders details{margin-top:12px;color:var(--muted)}#tacticArrowList{display:flex;flex-wrap:wrap;gap:6px;padding-top:12px}.tactic-empty{text-align:center;padding:25px 10px;color:var(--muted);line-height:1.7}.tactic-empty h3{color:var(--ink)}.tactic-updated{font-size:11px;color:var(--muted);margin-top:24px}.tactics-workspace button:disabled{opacity:.5;cursor:wait}.tactics-workspace button:focus-visible,.tactic-map-card:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.tactics-workspace .eyebrow{margin-top:0}
@media(max-width:1000px){.tactics-layout{grid-template-columns:200px minmax(0,1fr)}.tactics-workspace{padding:16px}.tactic-briefing{grid-template-columns:1fr}.tactics-detail-head{align-items:flex-start;flex-wrap:wrap}}
@media(max-width:720px){.tactics-heading{align-items:flex-start;flex-direction:column}.tactics-heading h2{font-size:25px}.tactics-layout{grid-template-columns:1fr}.tactics-library{position:static;padding:14px}.tactic-map-list{display:flex;max-height:none;overflow-x:auto;padding-bottom:8px}.tactic-map-card{min-width:155px;width:155px;align-items:flex-start}.tactic-map-card img{width:38px;height:38px}.tactic-map-card>span:last-child{display:none}.tactics-search{margin:12px 0}.tactics-workspace{padding:12px}.tactic-form-grid{grid-template-columns:1fr}.tactic-form-grid input,.tactic-form-grid select,.tactic-marker-editor input,.tactic-marker-editor textarea,.tactic-orders textarea,.tactics-search input{font-size:16px}.tactic-marker>span{width:25px;height:25px;font-size:15px}.tactic-marker>b{font-size:9px}.tactic-marker.cap>span{width:32px;height:32px}.tactic-toolbar button{min-height:42px}.tactic-toolbar{gap:8px}.tactic-actions button{flex:1}.tactic-edit-actions{align-items:stretch}.tactic-briefing{gap:24px}.tactics-detail-head{gap:12px}.tactics-detail-head>.tactic-actions{width:100%}}
.tactics-library{min-width:0}.tactic-roster-row>span:last-child{min-width:0;flex:1}.tactics-heading>div,.tactics-detail-head>div{min-width:0}.tactics-access{max-width:100%;overflow-wrap:anywhere}.tactic-title h3,.tactic-variants b{overflow-wrap:anywhere}
@media(max-width:720px){.tactics-layout{grid-template-columns:minmax(0,1fr)}.tactic-map-card{flex:0 0 155px}.tactics-access{font-size:11px}}


/* Direct board editing: controls stay in the page flow, never over the chart. */
.tactic-edit-actions:has(#tacticSave){position:static;padding:10px 0}
.tactic-arrow-hit{pointer-events:stroke;cursor:grab}
.tactic-arrow-handle{fill:#06111c;stroke:var(--arrow-color,#fff1a8);stroke-width:.4;opacity:.65;pointer-events:all;cursor:crosshair}
.tactic-arrow.selected .tactic-arrow-handle,.tactic-arrow:focus .tactic-arrow-handle,.tactic-arrow:hover .tactic-arrow-handle{opacity:1;fill:var(--arrow-color,#fff1a8);stroke:#06111c}
.tactic-arrow:focus{outline:none}.tactic-arrow:focus .tactic-arrow-line{stroke-width:.85}
.tactic-marker-popover{position:fixed;z-index:9;display:grid;gap:12px;width:310px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;margin:0;padding:16px;border:1px solid #6fe1f477;border-radius:12px;background:#0b2333;box-shadow:0 12px 48px #000a;user-select:text}
.tactic-marker-popover[hidden]{display:none}
.tactic-marker-popover label{display:grid;gap:6px;color:var(--muted);font-size:12px}
.tactic-marker-popover input,.tactic-marker-popover textarea{width:100%;min-width:0;background:#061724;color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:9px;font:inherit;resize:vertical}
.tactic-popover-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.tactic-popover-head h3{margin:0;font-size:15px}.tactic-popover-head button{padding:6px 10px}
.tactic-popover-actions{display:flex;gap:8px;flex-wrap:wrap}.tactic-popover-actions button{flex:1;min-height:38px}.tactic-marker-popover details{font-size:12px;color:var(--muted)}.tactic-marker-popover .tactic-coordinates{margin-top:10px}
@media(max-width:720px){.tactic-marker-popover input,.tactic-marker-popover textarea{font-size:16px}}


/* Board workspace: more room without controls floating over the chart. */
#tacticsContent.library-collapsed .tactics-layout{grid-template-columns:minmax(0,1fr)}
#tacticsContent.library-collapsed .tactics-library{display:none}
.tactic-stage{min-width:0}
.tactic-view-controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin:12px 0}
.tactic-view-controls>div{display:flex;flex-wrap:wrap;gap:7px;min-width:0}
.tactic-view-controls button{min-height:38px}
.tactic-view-controls button:disabled{opacity:.4;cursor:default}
.tactic-toolbar [data-tactic-add][aria-pressed=true]{color:#fff;border-color:var(--cyan);background:#276274}
.tactic-board.placing{cursor:crosshair}
body.tactic-expanded{overflow:hidden}
.tactic-stage.is-expanded{position:fixed;inset:0;z-index:30;background:#06111c;padding:16px 20px;overflow:auto;display:flex;flex-direction:column;align-items:stretch}
.tactic-stage.is-expanded .tactic-view-controls{flex-shrink:0;margin:0 0 12px}
.tactic-stage.is-expanded .tactic-toolbar{padding-top:10px;flex-shrink:0}
.tactic-stage.is-expanded .tactic-help{margin:8px 0;flex-shrink:0}
.tactic-stage.is-expanded .tactic-figure{margin:0;min-height:0;text-align:center}
.tactic-stage.is-expanded .tactic-board{width:var(--tactic-board-size,70vh);height:var(--tactic-board-size,70vh);max-width:100%;margin:0 auto}
.tactic-stage.is-expanded .tactic-marker-popover{text-align:left}
@media(max-width:720px){.tactic-view-controls>div{flex:1}.tactic-view-controls button{flex:1;padding:9px;font-size:12px}.tactic-stage.is-expanded{padding:12px}.tactic-stage.is-expanded .tactic-toolbar{gap:5px}.tactic-stage.is-expanded .tactic-toolbar button{font-size:12px;padding:7px;min-height:36px}}
.tactic-stage.is-expanded #tacticLibraryToggle{display:none}

/* Game-style class silhouettes, rendered from shared vector geometry. */
.tactic-class-icon{display:inline-block;width:22px;height:22px;vertical-align:middle;flex:none}
.tactic-toolbar [data-tactic-add]>span{display:inline-flex;align-items:center;vertical-align:middle}
.tactic-slot{display:flex;align-items:center;gap:5px}.tactic-slot .tactic-class-icon{width:18px;height:18px}
.tactic-board svg.tactic-class-icon{position:static;inset:auto;width:24px;height:24px;filter:none;pointer-events:none}
@media(max-width:720px){.tactic-board svg.tactic-class-icon{width:19px;height:19px}}

/* Plans share a map, with independent positions and orders. */
.tactic-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px;max-width:100%}
.tactic-tabs button{--tab-color:#38374f;--tab-ink:#f5fbff;border:1px solid #ffffff38;border-radius:10px;background:var(--tab-color);color:var(--tab-ink);padding:10px 13px;font:inherit;font-weight:700;cursor:pointer;min-height:42px}
.tactic-tabs button[data-tactic-tab="start"]{--tab-color:#c6ebe6;--tab-ink:#102e35}
.tactic-tabs button[data-tactic-tab="plan-a"]{--tab-color:#a1d5e3;--tab-ink:#102e35}
.tactic-tabs button[data-tactic-tab="plan-b"]{--tab-color:#7cb4d4;--tab-ink:#0b2636}
.tactic-tabs button[data-tactic-tab="crossfire"]{--tab-color:#598db9}
.tactic-tabs button[data-tactic-tab="defense"]{--tab-color:#536c9b}
.tactic-tabs button[data-tactic-tab="retreat"]{--tab-color:#514d78}
.tactic-tabs button[data-tactic-tab="loco"]{--tab-color:#38374f}
.tactic-tabs button:hover{filter:brightness(1.12)}
.tactic-tabs button[aria-selected="true"]{background:var(--tab-color);color:var(--tab-ink);box-shadow:inset 0 -4px #ffffffb3;outline:2px solid #d7faff;outline-offset:1px}
.tactic-tabs button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.tactic-tab-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}

.tactic-arrow-colors{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:12px}
.tactic-arrow-colors>span{color:var(--muted);font-size:12px;margin-right:5px}
.tactic-arrow-colors button{display:flex;align-items:center;gap:7px;padding:8px 11px;min-height:40px;border:1px solid #41606e;border-radius:8px;background:#0a202c;color:#eaf8fc;font:inherit;cursor:pointer}
.tactic-arrow-colors button>span{width:13px;height:13px;border-radius:50%;background:var(--arrow-color)}
.tactic-arrow-colors button[aria-pressed="true"]{border-color:var(--arrow-color);box-shadow:inset 0 -3px var(--arrow-color)}

.tactic-playback{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 0}.tactic-playback progress{width:120px;accent-color:#69e3c2}.tactic-playback small{color:#9eb4c2}.tactic-marker[title]{cursor:pointer}

.tactic-route-assignment{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;color:var(--muted);font-size:13px}.tactic-route-assignment select,.tactic-marker-popover select{background:#061724;color:var(--ink);padding:9px;border:1px solid var(--line);border-radius:7px;max-width:100%}

/* Keep the terrain grid; hide route geometry, labels and handles in playback. */
.tactic-board.is-playing .tactic-arrow,.tactic-board.is-playing .tactic-route-preview{visibility:hidden;pointer-events:none}
.tactic-board.is-playing .tactic-arrow *{pointer-events:none}

.tactic-board-layout{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:16px;align-items:start;margin-top:16px}
.tactic-board-layout>.tactic-figure{margin:0;min-width:0}
.tactic-tool-sidebar{position:sticky;top:90px;max-height:calc(100dvh - 110px);overflow:auto;padding:12px;background:#0b2333;border:1px solid var(--line);border-radius:10px;min-width:0}
.tactic-tool-sidebar .tactic-toolbar{display:grid;grid-template-columns:1fr;border:0;padding:0}.tactic-tool-sidebar .tactic-toolbar button{text-align:left}
.tactic-tool-sidebar .tactic-playback{border-top:1px solid var(--line);margin-top:12px}.tactic-tool-sidebar .tactic-playback button{width:100%}
.tactic-tool-sidebar label{display:grid;gap:6px;margin:10px 0;font-size:12px;color:var(--muted)}
.tactic-tool-sidebar select{width:100%;min-width:0;background:#061724;color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:8px}
.tactic-tool-sidebar h4{margin:16px 0 8px}.tactic-tool-sidebar .tactic-arrow-colors{flex-wrap:wrap}
.tactic-stage.is-expanded .tactic-board-layout{flex:1;min-height:0}.tactic-stage.is-expanded .tactic-tool-sidebar{top:0;max-height:calc(100dvh - 140px)}
@media(max-width:720px){.tactic-board-layout{grid-template-columns:minmax(0,1fr)}.tactic-tool-sidebar{position:static;max-height:none}.tactic-tool-sidebar .tactic-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}}

.tactic-tool-sidebar .tactic-help{display:none}
.tactic-tool-sidebar .tactic-arrow-colors{display:flex;flex-wrap:nowrap;gap:6px;margin:12px 0}
.tactic-tool-sidebar .tactic-arrow-colors button{width:30px;height:30px;min-height:30px;flex:0 0 30px;padding:6px;justify-content:center;border-radius:50%}
.tactic-tool-sidebar .tactic-arrow-colors button>span{width:16px;height:16px;flex-shrink:0}
.tactic-tool-sidebar .tactic-arrow-colors button[aria-pressed=true]{outline:2px solid var(--arrow-color);outline-offset:1px;box-shadow:none}
.tactic-sidebar-actions{display:grid;gap:6px;margin-bottom:12px}.tactic-sidebar-actions button{width:100%;font-size:12px;padding:8px;min-height:34px}
.tactic-tool-sidebar .tactic-toolbar button{font-size:12px;padding:7px;min-height:32px}

/* Tactic comfort: progressive disclosure keeps the board uncluttered. */
.tactic-quick-view,.tactic-presentation-controls,.tactic-batch-actions,.tactic-nudge,.tactic-recovery {display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tactic-quick-view {padding:10px 0;margin-bottom:10px;border-bottom:1px solid #6fe1f425}
.tactic-quick-view button[aria-pressed=true] {border-color:#6fe1f4;background:#163747}
.tactic-layer-panel {position:relative;margin-left:auto}
.tactic-layer-panel summary,.tactic-extra-panel>summary,.tactic-tools-fold>summary {cursor:pointer;padding:10px;color:#d5edf2;font-weight:600}
.tactic-layer-panel>div {position:absolute;right:0;top:100%;z-index:25;background:#102330;border:1px solid #34505e;border-radius:8px;padding:12px;min-width:185px;box-shadow:0 10px 30px #0008}
.tactic-layer-panel label,.tactic-extra-panel label {display:flex;gap:8px;align-items:center;margin:8px 0;font-size:13px}
.tactic-layer-panel input[type=checkbox],.tactic-extra-panel input[type=checkbox] {width:auto;flex:none}
.tactic-extra-panel {border:1px solid #6fe1f425;border-radius:9px;margin-top:10px;padding:0 10px 10px;min-width:0}
.tactic-extra-panel:not([open]) {padding-bottom:0}
.tactic-extra-panel label:has(input:not([type=checkbox])),.tactic-extra-panel label:has(select) {display:grid}
.tactic-extra-panel input,.tactic-extra-panel select {min-width:0;width:100%;box-sizing:border-box}
.tactic-extra-panel p,.tactic-extra-panel small {font-size:12px;line-height:1.5}
#tacticSelectionList {max-height:210px;overflow:auto}
.tactic-batch-actions button {flex:1;font-size:12px;padding:8px}
.tactic-nudge {justify-content:center;margin-top:10px}
.tactic-tools-fold {border-top:1px solid #6fe1f425}
.tactic-tools-fold .tactic-toolbar {padding-top:4px}
.tactic-personal {background:#112c38;border:1px solid #6fe1f455;padding:14px;border-radius:10px;margin-bottom:12px}
.tactic-personal h3 {font-size:15px;margin:0 0 10px}
.tactic-personal article+article {border-top:1px solid #6fe1f425;padding-top:10px;margin-top:10px}
.tactic-personal p {white-space:pre-wrap;font-size:14px;margin:6px 0}
.tactic-personal small {color:#a8c1cc}
.tactic-marker.tactic-mine {filter:drop-shadow(0 0 8px #6fe1f4);outline:2px solid #fff;outline-offset:4px;border-radius:8px;z-index:5}
.tactic-muted-marker,.tactic-muted-route {opacity:.23}
.tactic-enemy {--marker-color:#ff7777}
.tactic-marker[hidden] {display:none!important}
.hide-routes .tactic-arrow,.hide-notes .tactic-annotations {display:none}
.tactic-coordination {margin:18px 0}
.tactic-read-list {list-style:none;padding:0;max-height:240px;overflow:auto}
.tactic-read-list li {display:flex;justify-content:space-between;gap:15px;padding:7px 0;border-bottom:1px solid #6fe1f418;font-size:13px}
.tactic-assignee {color:#6fe1f4!important}
.tactic-presentation-controls {display:none}
body.tactic-presenting {overflow:hidden}
.tactic-stage.is-presenting {position:fixed;inset:0;z-index:2000;background:#06111c;padding:16px;display:flex;flex-direction:column;overflow:auto;box-sizing:border-box}
.is-presenting>.tactic-tabs,.is-presenting>.tactic-tab-actions,.is-presenting>.tactic-view-controls,.is-presenting>.tactic-quick-view,.is-presenting>.tactic-personal,.is-presenting .tactic-tool-sidebar {display:none!important}
.is-presenting .tactic-presentation-controls {display:flex;justify-content:space-between;flex:none}
.is-presenting .tactic-board-layout {display:flex;justify-content:center;min-height:0;flex:1}
.is-presenting .tactic-figure {width:min(calc(100vh - 110px),calc(100vw - 32px));margin:10px auto 0}
.is-presenting .tactic-board {width:100%;max-width:none}
.is-presenting .tactic-marker-popover {display:none!important}
.battle-tactic-links {display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
@media(max-width:720px){.tactic-layer-panel {margin-left:0}.tactic-quick-view {gap:6px}.tactic-presentation-controls b {order:-1;width:100%;font-size:13px}.tactic-stage.is-presenting {padding:8px}.is-presenting .tactic-figure {width:min(calc(100vh - 150px),calc(100vw - 16px))}.tactic-presentation-controls button {font-size:11px;padding:8px}.tactic-layer-panel>div {right:auto;left:0}.tactic-read-list li {flex-wrap:wrap}}

/* Extra editing panels live below the map rather than in the scrolling sidebar. */
.tactic-under-map-tools {grid-column:1;grid-row:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-width:0;align-items:start}
.tactic-under-map-tools .tactic-extra-panel {margin-top:0}
.tactic-board-layout>.tactic-tool-sidebar {grid-column:2;grid-row:1 / span 2}
.is-presenting .tactic-under-map-tools {display:none!important}
@media(max-width:720px){.tactic-under-map-tools {grid-column:1;grid-row:2;grid-template-columns:minmax(0,1fr)}.tactic-board-layout>.tactic-tool-sidebar {grid-column:1;grid-row:3}}
.tactic-annotation-colors {display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}
.tactic-annotation-colors button {display:flex;align-items:center;justify-content:center;width:30px;height:30px;min-height:30px;padding:5px;border:1px solid #41606b;border-radius:50%;background:#102632;cursor:pointer}
.tactic-annotation-colors button span {display:block;width:17px;height:17px;border-radius:50%;background:var(--arrow-color)}
.tactic-annotation-colors button[aria-pressed=true] {outline:2px solid var(--arrow-color);outline-offset:2px}
[data-tactic-annotation] {cursor:move;outline:none}
[data-tactic-annotation]:focus .tactic-annotation-hit {stroke:#fff;stroke-dasharray:1 .7}
[data-annotation-resize] {cursor:nwse-resize}
.tactic-under-map-tools input,.tactic-under-map-tools select {background:#061724;color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:8px;font:inherit}
#tacticAnnotationHandles {z-index:10;pointer-events:none}
.hide-notes .tactic-annotation-handles {display:none}
.tactic-tools-fold>summary {background:#164352;border:1px solid #52d6e9;border-radius:8px;color:#a6f3ff;margin:10px 0;font-weight:700;transition:background .15s,border-color .15s}
.tactic-tools-fold>summary:hover {background:#205768;border-color:#a6f3ff}
.tactic-tools-fold>summary:focus-visible {outline:2px solid #a6f3ff;outline-offset:3px}
.tactic-start-north>.tactic-terrain,.tactic-start-north>#tacticArrows,.tactic-start-north>#tacticMarkers,.tactic-start-north>#tacticAnnotationHandles {transform:rotate(180deg);transform-origin:50% 50%}
.tactic-start-north .tactic-marker {transform:translate(-50%,-50%) rotate(180deg)}
.tactic-member-search {margin:10px 0}
.tactic-member-search>label {margin-bottom:6px}
.tactic-member-input {display:flex;align-items:center;gap:6px}
.tactic-member-input input {min-width:0;flex:1}
.tactic-member-input button {flex:none;padding:8px}
#tacticMemberResults {max-height:160px;overflow:auto;border:1px solid var(--line);border-radius:7px;margin-top:5px;background:#061724}
#tacticMemberResults button {display:block;width:100%;padding:9px 10px;text-align:left;border:0;background:transparent;color:var(--ink);cursor:pointer;font:inherit}
#tacticMemberResults button:hover,#tacticMemberResults button[aria-selected=true] {background:#164352;color:#a6f3ff}
#tacticMemberResults p {padding:10px;margin:0;color:var(--muted);font-size:12px}
#tacticExport {background:#38374f;color:#f5fbff;border-color:#ffffff38}
#tacticExport:hover {background:#46445f;border-color:#ffffff70}
.tactic-tabs button.has-plan {border-color:#ffffffa0}
.tactic-tabs button.has-plan::after {content:"";display:inline-block;width:7px;height:7px;margin-left:9px;border-radius:50%;background:#ffd84d;vertical-align:middle;box-shadow:0 0 0 2px #ffffff25}

/* Only the active route exposes waypoint targets, above neighboring routes. */
.tactic-arrow:not(.selected) .tactic-arrow-handle { pointer-events: none; opacity: .25; }
.tactic-arrow.selected .tactic-arrow-handle { stroke: #fff; stroke-width: .45; opacity: 1; }
.tactic-arrow.selected .tactic-arrow-line { stroke-width: .85; }

.tactic-proposals{margin:16px 0}.tactic-proposals-heading{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.tactic-proposal-list{display:flex;gap:10px;flex-wrap:wrap}.tactic-proposal-list button{display:flex;align-items:flex-start;gap:8px;flex-direction:column;max-width:100%;white-space:normal;text-align:left}.tactic-proposal-list small{overflow-wrap:anywhere}.tactic-proposal-editor,.tactic-proposal-review{margin:16px 0;border:1px solid #4eabc5}.tactic-proposal-editor textarea,.tactic-proposal-review textarea{width:100%;box-sizing:border-box}.tactic-proposal-review .tactic-actions{flex-wrap:wrap}

/* The room stays beside the board on desktop and folds below the map on phones. */
.tactic-chat{margin-top:16px;border-top:1px solid #6fe1f440;padding-top:14px;min-width:0}.tactic-chat summary{cursor:pointer;font-weight:700;color:#a6f3ff}.tactic-chat-scope,.tactic-chat-status{font-size:11px;line-height:1.5;color:#abc3d0}.tactic-chat-actions{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}.tactic-chat-actions button{font-size:11px;padding:5px 8px}.tactic-chat-messages{max-height:320px;min-height:70px;overflow-y:auto;overscroll-behavior:contain;overflow-wrap:anywhere;scrollbar-gutter:stable}.tactic-chat-message{padding:9px;margin:0 0 8px;background:#102b3a;border-radius:8px;border-left:2px solid #47748a}.tactic-chat-message.is-own{border-left-color:#6fe1f4;background:#153747}.tactic-chat-message>div{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:space-between}.tactic-chat-message b{font-size:12px}.tactic-chat-message time{font-size:10px;color:#abc3d0}.tactic-chat-message p{font-size:12px;line-height:1.5;white-space:pre-wrap;margin:6px 0 0}.tactic-chat-form label{font-size:12px;display:block}.tactic-chat-form textarea{width:100%;box-sizing:border-box;resize:vertical;min-height:68px;max-height:200px;font-size:12px;margin-top:6px}.tactic-chat-form>div{display:flex;gap:8px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:8px}.tactic-chat-form small{font-size:10px;color:#abc3d0}.tactic-chat-form button{padding:7px 12px;font-size:12px}.tactic-chat-status{min-height:2em;margin-bottom:0}

.tactic-proposal-controls{margin:10px 0;display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;position:relative;min-width:0}.tactic-proposal-controls>.tactic-proposals{margin:0;padding:0;border:0;background:none;box-shadow:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.tactic-proposal-picker{position:relative}.tactic-proposal-picker>summary{cursor:pointer;padding:8px 12px;border:1px solid var(--line);border-radius:8px;font-size:12px;font-weight:700;color:var(--ink);background:#0b2333}.tactic-proposal-picker .tactic-proposal-list{position:absolute;left:0;top:100%;margin-top:5px;z-index:30;display:flex;flex-direction:column;flex-wrap:nowrap;width:min(300px,75vw);max-height:260px;overflow:auto;padding:8px;background:#0b2333;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 30px #0008}.tactic-proposal-picker .tactic-proposal-list button{width:100%;padding:8px;flex-direction:row;align-items:center;justify-content:space-between;font-size:12px}.tactic-proposal-controls>.tactic-proposal-review{flex:1 1 100%;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;padding:10px;background:#0b2333;min-width:0}.tactic-proposal-review>.eyebrow{margin:0;font-size:10px}.tactic-proposal-review>.tactic-review-summary{flex:1 1 180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%;margin:0;font-size:12px}.tactic-proposal-review>.tactic-actions{margin:0;gap:6px}.tactic-proposal-review button,.tactic-proposal-controls .danger-btn{font-size:11px;padding:7px 10px;min-height:32px}.tactic-proposal-review>label{flex:1 1 160px;margin:0;display:flex;align-items:center;gap:6px;font-size:11px}.tactic-proposal-review textarea{min-height:34px;max-height:90px;resize:vertical;background:#061724;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:6px;font:inherit}.tactic-proposal-review>.notice{margin:0;font-size:11px}.tactic-stage.is-expanded .tactic-proposal-controls{flex-shrink:0}@media(max-width:720px){.tactic-proposal-review>.tactic-actions{flex-wrap:wrap}.tactic-proposal-controls{width:100%}}

.tactic-tool-sidebar>.tactic-edit-actions{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin:0 0 10px}.tactic-tool-sidebar>.tactic-edit-actions:empty{display:none}.tactic-tool-sidebar>.tactic-edit-actions button{width:100%;font-size:12px;padding:8px;text-align:left}

.proposal-reason-dialog{width:min(680px,calc(100vw - 32px));max-height:80dvh;box-sizing:border-box;overflow:auto;padding:26px;border:1px solid #69d8ed;border-radius:16px;background:#0b2333;color:#f2f7fb;box-shadow:0 24px 90px #000a}.proposal-reason-dialog::backdrop{background:#020c17c9}.proposal-reason-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.proposal-reason-heading h2{font-size:24px;margin:0}.proposal-reason-heading button{font-size:20px;min-width:44px;min-height:44px}.proposal-reason-dialog h3{font-size:16px;margin:20px 0 12px;overflow-wrap:anywhere;color:#9ce8f5}.proposal-reason-text{font-size:18px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;user-select:text}.proposal-reason-dialog:focus{outline:none}@media(max-width:720px){.proposal-reason-dialog{padding:18px}.proposal-reason-text{font-size:17px}}