/* ==========================================================================
   Kampfinsel — Retro-Minimalist Browser Game Stylesheet
   Inselkampf-inspired retro web aesthetic: light, classic, readable
   ========================================================================== */

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 13px;
  height: 100%;
}

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  background-color: #f5f0e1;
  color: #1a1a1a;
  line-height: 1.5;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* --- Page Layout (Sidebar Support) --- */
.page-layout {
  display: flex;
  justify-content: center;
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 0.5rem;
  flex: 1;
}

/* --- Container --- */
.container {
  max-width: 760px;
  margin: 0 auto;
  padding: 1rem;
  flex: 1;
  min-width: 0;
}

/* --- Navigation --- */
nav, .nav {
  background-color: #3b2e1a;
  border-bottom: 2px solid #8b7355;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.nav-links {
  display: flex;
  gap: 0;
}

.nav-links a + a::before {
  content: "|";
  color: #8b7355;
  margin-right: 0;
  pointer-events: none;
}

.nav a {
  color: #d4c5a0;
  text-decoration: none;
  padding: 0.5rem 0.6rem;
  display: inline-block;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  font-size: 0.85rem;
}

.nav a:hover {
  color: #fff;
  background-color: #4a3d28;
}

.nav a.active {
  color: #f5d76e;
  border-bottom-color: #f5d76e;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0;
}

.nav-user {
  color: #f5d76e;
  font-weight: bold;
  font-size: 0.85rem;
}

.nav-right form {
  margin: 0;
}

.nav-right button {
  background: none;
  border: 1px solid #8b7355;
  color: #d4c5a0;
  padding: 0.2rem 0.6rem;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.75rem;
}

.nav-right button:hover {
  color: #fff;
  border-color: #fff;
}

/* --- FEAT-110 v0.80.0 — Header Island Picker (v1) --- */
/* FEAT-110 v0.80.0 — header island picker.
   Visually matched to the language-picker trigger (.kf-lp-light-trigger)
   for vertical and horizontal alignment in .nav-right: same parchment
   background, same border, same padding/font-size, same border-radius.
   appearance:none strips the native select chrome (which would otherwise
   add platform-specific padding and make the control taller than the
   lang-picker button on macOS/Safari). A custom caret is embedded via
   inline SVG background-image so the dropdown affordance stays visible
   after the native chrome is removed. */
.nav-island-picker {
  display: flex;
  align-items: center;
  margin: 0;
}

.nav-island-picker select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #f5f0e1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' stroke='%236b5d4e' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.45rem center;
  background-size: 10px 10px;
  border: 1px solid #c4b28a;
  border-radius: 3px;
  color: #3b2e1a;
  padding: 0.25rem 1.5rem 0.25rem 0.55rem;
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1.2;
  cursor: pointer;
  max-width: 250px;
}

.nav-island-picker select:hover {
  background-color: #efe7d0;
  border-color: #6b5d4e;
}

@media (max-width: 768px) {
  .nav-island-picker select {
    max-width: 220px;
    text-overflow: ellipsis;
  }
}

/* --- Unread Badges --- */
.badge {
  display: inline-block;
  background: #8b0000;
  color: #f5f0e1;
  font-size: 10px;
  font-family: 'Courier New', monospace;
  padding: 0 4px;
  margin-left: 2px;
  min-width: 14px;
  text-align: center;
  vertical-align: middle;
  line-height: 16px;
}
.badge-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #8b0000;
  border-radius: 50%;
  margin-left: 2px;
  vertical-align: middle;
}

/* --- Headings --- */
h1 {
  color: #3b2e1a;
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.4rem;
}

h2 {
  color: #3b2e1a;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

h3 {
  color: #3b2e1a;
  font-size: 1rem;
  margin-bottom: 0.4rem;
}

/* --- Links --- */
a {
  color: #1a0dab;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: #1a0dab;
}

/* --- Tables --- */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  font-size: 0.85rem;
}

th, td {
  padding: 0.4rem 0.6rem;
  text-align: left;
}

th {
  background-color: #e8e0d0;
  color: #3b2e1a;
  font-weight: bold;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  border: 1px solid #ccc;
}

td {
  background-color: #f5f0e1;
  border: 1px solid #ddd;
}

tr:hover td {
  background-color: #ebe5d5;
}

/* --- Forms --- */
form {
  margin-bottom: 1rem;
}

label {
  display: block;
  color: #555;
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  background-color: #fff;
  border: 1px solid #bbb;
  color: #1a1a1a;
  font-family: inherit;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #8b7355;
}

/* --- Buttons --- */
button, .btn {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  border: 1px solid #bbb;
  background-color: #e8e0d0;
  color: #3b2e1a;
  transition: background-color 0.15s, border-color 0.15s, transform 0.05s, filter 0.1s;
  text-decoration: none;
  text-align: center;
}

button:hover, .btn:hover {
  background-color: #ddd5c0;
  border-color: #999;
  filter: brightness(1.05);
}

button:active, .btn:active {
  transform: scale(0.97);
}

button:disabled, .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: none;
  transform: none;
  pointer-events: none;
}

.btn-primary {
  background-color: #5a8f3c;
  color: #fff;
  border-color: #4a7a30;
  font-weight: bold;
}

.btn-primary:hover {
  background-color: #4a7a30;
  border-color: #4a7a30;
}

.btn-danger {
  background-color: #a03030;
  color: #fff;
  border-color: #8a2020;
}

.btn-danger:hover {
  background-color: #8a2020;
  border-color: #8a2020;
}

.btn-cancel {
  background: transparent;
  color: #999;
  border: 1px solid #ccc;
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
}

.btn-cancel:hover {
  color: #a03030;
  border-color: #a03030;
  background: transparent;
}

/* --- Auth Pages --- */
.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70vh;
}

.auth-form {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 2rem;
  width: 100%;
  max-width: 360px;
}

.auth-form h1 {
  text-align: center;
  border-bottom: none;
  margin-bottom: 1.5rem;
}

.auth-form button[type="submit"] {
  width: 100%;
  margin-top: 0.5rem;
}

.auth-form .auth-link {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: #555;
}

/* --- Messages --- */
.error {
  background-color: #ffeaea;
  border: 1px solid #d88;
  color: #a03030;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
}

.success {
  background-color: #eaf5ea;
  border: 1px solid #5a8f3c;
  color: #2d6a1e;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
}

/* --- Resources Bar --- */
.resources-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 0.5rem 1rem;
  background-color: #e8e0d0;
  border: 1px solid #ccc;
  margin-bottom: 1rem;
  font-size: 0.85rem;
}

.resources-bar .resource {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.resources-bar .resource-label {
  color: #666;
  font-size: 0.8rem;
}

.resources-bar .resource-value {
  color: #3b2e1a;
  font-weight: bold;
}

.resources-bar .resource-rate {
  color: #2d6a1e;
  font-size: 0.75rem;
  margin-left: 0.3rem;
}

.resource-icon {
  font-size: 1rem;
}

.resource-protected {
  color: #8b6914;
  font-size: 0.75rem;
  margin-left: 0.15rem;
}

.resource-warning .resource-value { color: #6b1c1c; font-weight: bold; }
.resource-full-timer { color: #6b5d4e; font-size: 11px; }
.resource-warning .resource-full-timer { color: #6b1c1c; }
.max-buildable { color: #6b5d4e; font-size: 11px; white-space: nowrap; }

/* --- Islands list row enrichments (v0.79.0) --- */
.island-activity {
  display: inline-block;
  margin-left: 0.3rem;
  font-size: 1rem;
  cursor: help;
}
.island-attack-warning {
  display: inline-block;
  color: #6b1c1c;
  font-weight: bold;
  margin-right: 0.4rem;
}
.island-attack-warning--pulse {
  animation: island-attack-pulse 1.5s ease-in-out infinite;
}
@keyframes island-attack-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.island-res {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  margin-right: 0.5rem;
  font-family: "Courier New", monospace;
  font-size: 0.85rem;
}
.island-res.resource-warning { color: #6b1c1c; font-weight: bold; }

/* --- Islands list: mobile-stacked card layout (v0.79.1) ---
 * Overrides the generic `@media (max-width:768px) { table { ... nowrap; overflow-x:auto } }`
 * rule so the islands list collapses to vertical cards on mobile instead of
 * a horizontal scroll container. Each <td> becomes a stacked block with a
 * small monospace label derived from `data-label`. */
@media (max-width: 768px) {
  table.islands-list-table {
    display: block;
    overflow-x: visible;
    white-space: normal;
    max-width: 100%;
    border-collapse: collapse;
  }
  table.islands-list-table thead { display: none; }
  table.islands-list-table tbody, table.islands-list-table tr {
    display: block;
    width: 100%;
  }
  table.islands-list-table tbody tr {
    border: 1px solid #c8b89a;
    margin: 0 0 0.6rem;
    padding: 0.5rem 0.6rem;
    background: #fdf8e8;
  }
  table.islands-list-table tbody tr.row-active {
    background: rgba(90, 143, 60, 0.1);
    border-color: #5a8f3c;
  }
  table.islands-list-table tbody td {
    display: block;
    border: 0;
    padding: 0.25rem 0;
    white-space: normal;
  }
  table.islands-list-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-family: "Courier New", monospace;
    font-size: 0.7rem;
    color: #6b5d4e;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.15rem;
  }
  /* Hide the label for the coords cell — the coords themselves are the heading */
  table.islands-list-table tbody td:first-child::before { display: none; }
  table.islands-list-table tbody td:first-child {
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 0.2rem;
  }
  /* Resources cell — let resources wrap onto multiple lines if narrow */
  table.islands-list-table .island-res {
    margin-right: 0.6rem;
    margin-bottom: 0.15rem;
  }
  /* Attack warning + activity icons should wrap, not nowrap */
  table.islands-list-table .island-attack-warning {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem;
    margin-right: 0.4rem;
    margin-bottom: 0.2rem;
  }
}

/* --- Footer --- */
.footer {
  text-align: center;
  padding: 1rem;
  color: #999;
  font-size: 0.7rem;
  border-top: 1px solid #ccc;
  margin-top: auto;
}

.footer a {
  color: #999;
}

.footer a:hover {
  text-decoration: underline;
}

/* --- Utility --- */
.text-center {
  text-align: center;
}

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }

/* --- Island View --- */
.storage-info {
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 1rem;
  padding: 0.3rem 1rem;
}

.construction-active {
  background-color: #fdf8e8;
  border: 1px solid #d4a017;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.construction-active h2 {
  margin-bottom: 0.3rem;
  font-size: 1rem;
}

.construction-active .countdown {
  color: #8b6914;
  font-weight: bold;
}

.building-locked td {
  color: #999;
}

tr.building-locked:hover td {
  background-color: #f5f0e1;
}

.coordinates {
  color: #666;
  font-size: 0.9rem;
  font-weight: normal;
  margin-left: 0.5rem;
}

/* --- Buildings View --- */
.prereq-met { color: #2d6a1e; }
.prereq-unmet { color: #a03030; }
.text-muted { color: #999; }
.building-maxed td { color: #888; }
.btn-sm { padding: 0.2rem 0.6rem; font-size: 0.75rem; }
td form { margin: 0; }
.cost-insufficient { color: #a03030; }

/* --- Form Groups --- */
.form-group { margin-bottom: 0.75rem; }

/* --- Checkbox labels (e.g. rank permissions) --- */
.checkbox-label {
  display: block;
  padding: 0.15rem 0;
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
  margin-right: 0.4rem;
  vertical-align: middle;
}
fieldset {
  border: 1px solid #ccc;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}
fieldset legend {
  font-weight: bold;
  font-size: 0.9rem;
  padding: 0 0.3rem;
}

/* --- Military View --- */
.troops-section {
  margin-bottom: 1rem;
}

.troops-section table {
  margin-bottom: 0.5rem;
}

.research-bonus {
  color: #2d6a1e;
  font-size: 0.75rem;
}

/* --- Research effect tooltip (BUG-507: tap-accessible on mobile) --- */
.research-effect-tooltip {
  display: inline;
}
.research-effect-tooltip > summary {
  cursor: pointer;
  font-size: 0.85em;
  display: inline;
  list-style: none;
}
.research-effect-tooltip > summary::-webkit-details-marker { display: none; }
.research-effect-tooltip > summary::marker { content: ''; }
.research-effect-tooltip[open] > summary {
  /* Optional: visually distinguish the open state */
}
.research-effect-tooltip-body {
  display: inline;
  margin-left: 0.4em;
  font-size: 0.85em;
  color: #666;
}

input[type="number"] {
  width: 4rem;
  padding: 0.3rem 0.4rem;
  background-color: #fff;
  border: 1px solid #bbb;
  color: #1a1a1a;
  font-family: inherit;
  font-size: 0.85rem;
  text-align: center;
}

input[type="number"]:focus {
  outline: none;
  border-color: #8b7355;
}

.no-troops {
  color: #999;
  font-style: italic;
  margin-bottom: 1rem;
}

/* --- Map View --- */
.map-info {
  margin-bottom: 1rem;
  color: #666;
  font-size: 0.85rem;
}

.map-grid-wrapper {
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

.map-grid {
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 0;
  font-size: 0.7rem;
  width: auto; /* override table { width: 100% } — cells must be their natural 8px width */
}

.map-grid th {
  padding: 0.15rem 0.2rem;
  font-size: 0.6rem;
  text-align: center;
  background-color: #e8e0d0;
  color: #555;
}

.map-grid td {
  padding: 0;
  border: none;
  cursor: default;
  position: relative;
}

/* Render islands as centered dots */
.map-grid td::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.map-cell-own { background-color: rgba(90,143,60,0.35); }
.map-cell-ally { background-color: rgba(74,122,126,0.35); }
.map-cell-enemy { background-color: rgba(192,64,64,0.35); }
.map-cell-empty { background-color: rgba(204,197,176,0.25); }

/* Inactivity pipeline stages (v0.16.0) — muted earth-tones distinct from
   ally/neutral. Keep the dot in the exact hex from ISLAND_COLOR_CONFIG. */
.map-cell-slumbering       { background-color: rgba(154,122,122,0.30); }
.map-cell-rudderless       { background-color: rgba(138,122,101,0.32); }
.map-cell-old-empire-ruin  { background-color: rgba(90,85,72,0.40); }
/* v0.20.0 — darker, heavier red for the 7-day deletion grace period. */
.map-cell-pending-deletion { background-color: rgba(107,58,58,0.38); }
/* v0.65.7 BUG-631 hotfix — Korsaren-Festung cells: pure black, fully opaque.
   Solid colour fill is font-independent (unlike the 🏴 emoji we tried first)
   and stands out unmistakably against the parchment-toned palette of every
   other cell state. Cells are 8×40px (v1), so a near-black vertical stripe
   is what the player sees. */
.map-cell-korsaren-fortress { background-color: #000000; }
/* FEAT-112 / FEAT-113 (v0.82.0) — fogged foreign-ocean grid-row. Muted,
   monochrome parchment-grey. NO gradient, NO animation (retro-constraint per
   DESIGN.md). The fog cells have no centre dot (no island data to mark). */
.map-cell-foreign-fog { background-color: #b8b09a; }

.map-cell-own::after { background-color: #5a8f3c; }
.map-cell-ally::after { background-color: #4a7a7e; }
.map-cell-enemy::after { background-color: #c04040; }
.map-cell-empty::after { background-color: #ccc5b0; }
.map-cell-slumbering::after       { background-color: #9a7a7a; }
.map-cell-rudderless::after       { background-color: #8a7a65; }
.map-cell-old-empire-ruin::after  { background-color: #5a5548; }
.map-cell-pending-deletion::after { background-color: #6b3a3a; }
/* White dot on the all-black fortress cell so the centre marker stays visible. */
.map-cell-korsaren-fortress::after { background-color: #ffffff; }
.map-cell-hidden::after { display: none; }
/* FEAT-112 / FEAT-113 — fogged cells carry no island, so no centre dot. */
.map-cell-foreign-fog::after { display: none; }

/* FEAT-112 / FEAT-113 — Ocean selector + foreign-ocean sector view (v1). */
.map-ocean-selector {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 1rem;
  font-family: 'Courier New', monospace;
}
.map-ocean-selector label { font-weight: bold; }
.map-foreign-profile,
.map-foreign-locked {
  background: #f5f0e1;
  border: 1px solid #5a4a2c;
  padding: 0.75rem 1rem;
  margin: 0.5rem 0 1rem;
}
.map-foreign-profile h3,
.map-foreign-locked h3 { margin-top: 0; }
.map-foreign-profile-list { list-style: none; margin: 0; padding: 0; }
.map-foreign-profile-list li { padding: 0.15rem 0; }
.map-foreign-monopoly { color: #8a2e2e; font-weight: bold; }
.map-foreign-fog-header {
  font-style: italic;
  color: #5a4a2c;
  margin: 0.25rem 0 0.5rem;
}

.map-symbol-protected {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.8em;
  color: #f5f0e1;
  text-shadow: 0 0 2px rgba(0,0,0,0.7);
  pointer-events: none;
  user-select: none;
}

.map-grid td:hover {
  outline: 1px solid #8b7355;
  z-index: 1;
}

.map-owner-own {
  color: #2d6a1e;
}

.map-owner-enemy {
  color: #a03030;
}

/* Map cell click affordance (BUG-238 fix — iOS Safari click dispatch quirk) */
.map-grid td[data-island-coords] { cursor: pointer; }
.map-grid td[data-island-coords]:hover { outline: 2px solid #1a0dab; }
.map-grid td[data-island-coords]:focus {
  outline: 2px solid #1a0dab;
  outline-offset: 0;
}

/* Watchtower Lv 0 warning */
.map-watchtower-lv0 {
  border: 1px solid #6b1c1c;
  background: #f8e8e0;
  padding: 0.75rem;
  margin: 0 0 1rem 0;
  font-size: 0.95rem;
}
.map-watchtower-lv0 a { font-weight: bold; }

/* Map legend (BUG-239 fix — structured colours + symbols) */
.map-legend {
  margin: 0.5rem 0 1rem 0;
  font-size: 0.85rem;
  color: #3b2e1a;
}
.map-legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0.25rem 0;
  align-items: baseline;
}
.map-legend-label { font-weight: bold; }
.map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}
.map-legend-swatch {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  border: 1px solid #6b5d4e;
  border-radius: 50%;
}
.map-legend-symbol {
  display: inline-block;
  width: 1.1em;
  text-align: center;
  font-weight: bold;
}

/* Overlay (BUG-238 — modal shell) */
.map-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(30, 25, 15, 0.55);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.map-overlay.visible { display: flex; }
.map-overlay-panel {
  background: #f5f0e1;
  border: 1px solid #6b5d4e;
  padding: 1rem 1.25rem;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  font-family: "Courier New", Courier, monospace;
  color: #1a1a1a;
}
.map-overlay-close {
  position: absolute;
  top: 0.25rem; right: 0.5rem;
  background: transparent;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: #3b2e1a;
  padding: 0.25rem 0.5rem;
}
.map-overlay-coord {
  font-family: "Courier New", Courier, monospace;
  font-size: 1.3rem;
  margin: 0 0 0.5rem 0;
  color: #3b2e1a;
}
.map-overlay-owner { margin: 0.5rem 0; font-size: 1rem; }
.map-overlay-info { list-style: none; padding: 0; margin: 0.5rem 0; }
.map-overlay-info li { margin: 0.15rem 0; }

/* v0.20.0 — Lifecycle status badges in the map overlay. */
.map-overlay-lifecycle { margin: 0.5rem 0; }
.lifecycle-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 3px;
  margin-right: 4px;
  color: #fff;
  font-family: "Courier New", Courier, monospace;
}
.lifecycle-slumbering       { background: #9a7a7a; }
.lifecycle-rudderless       { background: #8a7a65; }
.lifecycle-old-empire-ruin  { background: #5a5548; }
.lifecycle-pending-deletion { background: #6b3a3a; }
.lifecycle-banned           { background: #000; }
.lifecycle-vacation         { background: #4a7a7e; }
.map-overlay-actions {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.map-overlay-actions a,
.map-overlay-actions button {
  font-family: "Courier New", Courier, monospace;
  padding: 0.3rem 0.6rem;
  border: 1px solid #6b5d4e;
  background: #eee8d5;
  color: #1a0dab;
  text-decoration: none;
  cursor: pointer;
  font-size: 0.85rem;
}
.map-overlay-actions a.btn-primary,
.map-overlay-actions button.btn-primary {
  background: #2d5a27;
  color: #f5f0e1;
  border-color: #2d5a27;
}

/* Filter + pagination */
.map-filter-bar { margin: 0.5rem 0; font-size: 0.85rem; }
.map-filter-bar label { margin-right: 0.75rem; }
.map-pagination { margin: 0.5rem 0; font-size: 0.85rem; }
.map-pagination a { margin: 0 0.35rem; }
.map-sort-indicator { font-size: 0.7em; margin-left: 0.15em; }

/* Mobile tweaks (BUG-238 — modal fits small screens) */
@media (max-width: 600px) {
  .map-grid-wrapper { overflow-x: auto; }
  .map-grid td { min-width: 24px; min-height: 24px; }
  .map-overlay { padding: 0.5rem; }
  .map-overlay-panel { max-width: 95vw; max-height: 95vh; }
}

/* Welcome-Back + Frontier-Respawn modals (Feature 4) */
.welcome-back-overlay .map-overlay-panel,
.frontier-respawn-overlay .map-overlay-panel {
  max-width: 560px;
}
.welcome-back-officer {
  font-style: italic;
  color: #5a4a35;
  margin-bottom: 1rem;
  line-height: 1.4;
}
.welcome-back-stats {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0;
  border-top: 1px solid #a89878;
  border-bottom: 1px solid #a89878;
}
.welcome-back-stats li {
  padding: 0.35rem 0;
  border-bottom: 1px dotted #c7bba0;
}
.welcome-back-stats li:last-child { border-bottom: none; }
.welcome-back-stat-label {
  font-weight: bold;
  margin-right: 0.5rem;
  color: #3b2e1a;
}
.welcome-back-lost-islands {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0.25rem 0;
}
.welcome-back-bonus-note {
  background: #f7ecc7;
  border: 1px solid #c9a86b;
  padding: 0.5rem 0.75rem;
  margin-top: 0.75rem;
  font-size: 0.95rem;
}
.frontier-respawn-narrative {
  margin: 0.75rem 0;
  font-style: italic;
  line-height: 1.5;
  color: #3b2e1a;
}
.frontier-respawn-spawn {
  font-family: "Courier New", Courier, monospace;
  font-size: 1.1rem;
  font-weight: bold;
  margin: 0.5rem 0;
}

/* --- Fleet Page --- */
.fleet-section { margin-bottom: 2rem; }
.fleet-card {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  background: #fff;
}
.fleet-card-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.fleet-status { font-weight: bold; }
.fleet-status-traveling { color: #c07020; }
.fleet-status-returning { color: #1a0dab; }
.fleet-composition { font-size: 0.85rem; color: #666; }
.fleet-resources { font-size: 0.85rem; color: #666; margin-top: 0.25rem; }
.fleet-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1rem;
}
.fleet-form-grid label { display: flex; justify-content: space-between; align-items: center; }
.fleet-form-grid input[type="number"] { width: 5rem; }
.mission-radios { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0.5rem 0; }
.mission-radios label { cursor: pointer; }

/* --- Message Detail --- */
.message-detail { background: #fff; border: 1px solid #ccc; padding: 1rem; margin-bottom: 1rem; max-width: 100%; box-sizing: border-box; overflow-x: hidden; }
.message-detail hr { border: none; border-top: 1px solid #ddd; margin: 0.75rem 0; }
.message-body { line-height: 1.6; word-break: break-word; overflow-wrap: anywhere; }
.message-body a { word-break: break-all; overflow-wrap: anywhere; max-width: 100%; }
.message-body pre { max-width: 100%; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
.message-body table { max-width: 100%; display: block; overflow-x: auto; }
.message-body img { max-width: 100%; height: auto; }

/* --- Board Messages --- */
.board-message { background: #fff; border: 1px solid #ddd; padding: 0.75rem; margin-bottom: 0.5rem; word-break: break-word; overflow-wrap: anywhere; }
.board-message small { color: #999; }

/* --- Badges --- */
.badge { display: inline-block; padding: 0.1rem 0.4rem; font-size: 0.7rem; text-transform: uppercase; background: #8b6914; color: #fff; font-weight: bold; }
.badge-main { background: #8b6914; }
.badge-active { background: #5a8f3c; }

/* --- Islands List --- */
.row-active td { background-color: rgba(90, 143, 60, 0.1); }

/* --- Reports --- */
.result-victory { color: #2d6a1e; font-weight: bold; }
.result-defeat { color: #a03030; font-weight: bold; }
.report-summary { background: #fff; border: 1px solid #ccc; padding: 1rem; margin-bottom: 1rem; }
/* v0.20.0 — pre-industrial flavour line for pending_deletion defender reports. */
.report-lore { color: #6b5d4e; font-style: italic; margin: 0.75rem 0 0 0; }
.report-lore-pending-deletion { color: #6b3a3a; }
.report-phase { border: 1px solid #ccc; padding: 1rem; margin-bottom: 1rem; }
.report-phase h2 { border-bottom: 1px solid #ddd; padding-bottom: 0.3rem; }

/* --- Tutorial --- */
.tutorial-banner {
  background-color: #fdf8e8;
  border: 1px solid #d4a017;
  border-left: 3px solid #d4a017;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.tutorial-banner-complete {
  border-color: #5a8f3c;
  border-left-color: #5a8f3c;
}

.tutorial-banner-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.tutorial-banner-title {
  color: #8b6914;
  font-weight: bold;
  font-size: 0.9rem;
  text-transform: uppercase;
}

.tutorial-banner-complete .tutorial-banner-title {
  color: #2d6a1e;
}

.tutorial-banner-progress {
  color: #666;
  font-size: 0.8rem;
}

.tutorial-banner-link {
  color: #1a0dab;
  font-size: 0.8rem;
  margin-left: auto;
}

.tutorial-skip-btn {
  background: none;
  border: none;
  color: #999;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 0.3rem;
  line-height: 1;
}

.tutorial-skip-btn:hover {
  color: #666;
}

.tutorial-progress-bar {
  height: 4px;
  background-color: #ddd;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.tutorial-progress-fill {
  height: 100%;
  background-color: #d4a017;
  transition: width 0.3s ease;
}

.tutorial-banner-complete .tutorial-progress-fill {
  background-color: #5a8f3c;
}

.tutorial-reward-flash {
  background-color: #eaf5ea;
  border: 1px solid #5a8f3c;
  color: #2d6a1e;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}

.tutorial-current {
  font-size: 0.85rem;
}

.tutorial-task {
  color: #1a1a1a;
  margin-bottom: 0.25rem;
}

.tutorial-hint {
  color: #666;
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
}

.tutorial-reward {
  color: #8b6914;
  font-size: 0.8rem;
}

.tutorial-complete-msg {
  color: #2d6a1e;
  font-size: 0.85rem;
}

/* Tutorial Overview Page */
.tutorial-progress-overview {
  margin-bottom: 1.5rem;
}

.tutorial-progress-overview p {
  color: #666;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.tutorial-progress-overview .tutorial-progress-bar {
  height: 6px;
}

.tutorial-skipped {
  color: #999;
  font-style: italic;
  margin-bottom: 1rem;
}

.tutorial-steps-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tutorial-step {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid #ccc;
  background-color: #fff;
  align-items: flex-start;
}

.tutorial-step-done {
  border-color: #5a8f3c;
}

.tutorial-step-ready {
  border-color: #d4a017;
}

.tutorial-step-icon {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.9rem;
  flex-shrink: 0;
  border: 1px solid #ccc;
  color: #999;
}

.tutorial-step-done .tutorial-step-icon {
  background-color: rgba(90, 143, 60, 0.1);
  border-color: #5a8f3c;
  color: #2d6a1e;
}

.tutorial-step-ready .tutorial-step-icon {
  background-color: rgba(212, 160, 23, 0.1);
  border-color: #d4a017;
  color: #8b6914;
}

.tutorial-step-content {
  flex: 1;
}

.tutorial-step-content h3 {
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}

.tutorial-step-content p {
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 0.15rem;
}

.tutorial-step-hint {
  font-style: italic;
}

.tutorial-step-reward {
  color: #8b6914 !important;
}

.tutorial-step-date {
  color: #999 !important;
  font-size: 0.75rem !important;
}

.tutorial-step-status {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #999;
  white-space: nowrap;
}

.tutorial-step-done .tutorial-step-status {
  color: #2d6a1e;
}

.tutorial-step-ready .tutorial-step-status {
  color: #8b6914;
}

/* --- Building Grid (Cards) --- */
.building-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.building-card {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.building-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.building-card-name {
  color: #1a1a1a;
  font-weight: bold;
  font-size: 0.85rem;
}

.building-card-level {
  color: #666;
  font-size: 0.75rem;
}

.building-card-cost {
  font-size: 0.8rem;
  color: #555;
}

.building-card-time {
  font-size: 0.75rem;
  color: #666;
}

.building-card-prereqs {
  font-size: 0.75rem;
}

.building-card-action {
  margin-top: auto;
  padding-top: 0.4rem;
}

.building-card-action form { margin: 0; }

/* Card states */
.building-card--constructing {
  border: 1px dashed #d4a017;
  opacity: 0.6;
  position: relative;
}

.building-card--constructing::after {
  content: "Im Bau...";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #8b6914;
  font-weight: bold;
  font-size: 0.8rem;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.85);
  padding: 0.2rem 0.5rem;
}

html[lang="en"] .building-card--constructing::after {
  content: "Building...";
}

.building-card--locked {
  opacity: 0.5;
}

.building-card--locked .building-card-name {
  color: #999;
}

.building-card--maxed {
  border-color: #ddd;
}

.building-card--maxed .building-card-name {
  color: #888;
}

/* Mini grid (island overview) */
.building-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.building-mini-card {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}

.building-mini-name {
  color: #1a1a1a;
}

.building-mini-level {
  color: #8b6914;
  font-weight: bold;
  font-size: 0.75rem;
}

.building-mini-card--locked {
  opacity: 0.5;
}

.building-mini-card--locked .building-mini-name {
  color: #999;
}

/* --- Building List (Island Overview) --- */
.building-list {
  list-style: none;
  padding: 0;
  margin-bottom: 1rem;
  columns: 2;
  column-gap: 2rem;
}

.building-list-item {
  padding: 0.2rem 0;
  font-size: 0.85rem;
  break-inside: avoid;
}

.building-list-item a {
  color: #1a0dab;
}

.building-list-locked {
  opacity: 0.5;
}

.building-list-locked a {
  color: #999;
}

.building-list-level {
  color: #666;
  font-size: 0.8rem;
}

/* --- Timer/Progress Bar --- */
.timer-wrapper {
  margin: 0.4rem 0;
}

.timer-text {
  display: block;
  font-size: 0.8rem;
  color: #1a1a1a;
  margin-bottom: 0.2rem;
}

.timer-bar {
  height: 16px;
  background-color: #ddd5c5;
  border: 1px solid #ccc;
  overflow: hidden;
}

.timer-bar-fill {
  height: 100%;
  background-color: #5a8f52;
  transition: width 1s linear;
  min-width: 0;
}

.timer-complete {
  color: #5a7a3a;
  font-weight: bold;
}

.timer-urgent {
  font-weight: bold;
}

/* --- Input Validation Error --- */
.input-error {
  border-color: #a03030 !important;
  box-shadow: 0 0 0 1px rgba(160, 48, 48, 0.3);
}

/* --- Trade Capacity Indicator --- */
.trade-capacity-indicator {
  font-size: 0.8rem;
  color: #666;
  margin-top: 0.25rem;
}

.trade-capacity-indicator.over-capacity {
  color: #a03030;
  font-weight: bold;
}

/* --- Landing Page --- */
.landing-page {
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  line-height: 1.6;
}

.landing-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 12px;
}

.landing-header {
  text-align: center;
  padding: 1.5rem 0 0.5rem;
}

.landing-title {
  font-family: Georgia, 'PT Serif', serif;
  font-size: 24px;
  color: #3b2e1a;
  margin: 0;
  border-bottom: none;
}

.landing-subtitle {
  font-size: 12px;
  color: #5a4a3a;
  margin-top: 0.25rem;
}

.landing-nav {
  text-align: center;
  padding: 0.5rem 0;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #ccc;
  font-size: 0.85rem;
  background-color: transparent;
  display: block;
}

.landing-nav a {
  color: #1a0dab;
}

.sep {
  color: #6b5d4e;
  margin: 0 0.3rem;
}

/* Landing Auth Box */
.landing-auth-box {
  background: #eee8d5;
  border: 1px solid #ccc;
  padding: 1.5rem;
  margin: 0 auto 1.5rem;
  max-width: 380px;
}

.landing-tabs {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.landing-tabs a {
  color: #1a0dab;
  margin: 0 0.3rem;
}

.active-tab {
  font-weight: bold;
  text-decoration: underline;
}

/* CSS :has(:target) tab switching — no JavaScript */
.landing-auth-box:has(#login-form:target) #login-form { display: block !important; }
.landing-auth-box:has(#login-form:target) #register-form { display: none !important; }
.landing-auth-box:has(#login-form:target) .tab-login { font-weight: bold !important; }
.landing-auth-box:has(#login-form:target) .tab-register { font-weight: normal !important; }

.landing-auth-box:has(#register-form:target) #register-form { display: block !important; }
.landing-auth-box:has(#register-form:target) #login-form { display: none !important; }
.landing-auth-box:has(#register-form:target) .tab-register { font-weight: bold !important; }
.landing-auth-box:has(#register-form:target) .tab-login { font-weight: normal !important; }

.landing-auth-box form {
  margin-bottom: 0.75rem;
}

.landing-auth-box label,
.landing-auth-box input[type="text"],
.landing-auth-box input[type="password"] {
  width: 100%;
}

.landing-auth-box .cf-turnstile {
  display: flex;
  justify-content: center;
  margin: 0.5rem 0;
}

.landing-auth-box button[type="submit"] {
  margin-top: 0.5rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.landing-tagline {
  text-align: center;
  font-size: 0.8rem;
  color: #5a4a3a;
  margin-top: 0.75rem;
}

.landing-resources {
  text-align: center;
  font-size: 0.8rem;
  margin-top: 0.3rem;
}

.res-gold { color: #805d06; }
.res-stone { color: #5b6370; }
.res-wood { color: #8b5e3c; }

.landing-sandbox-cta {
  text-align: center;
  margin-top: 12px;
}
.btn-sandbox {
  display: inline-block;
  background: transparent;
  color: #4a3728;
  border: 2px solid #4a3728;
  padding: 10px 24px;
  font-size: 1rem;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  font-family: 'Courier New', monospace;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}
.btn-sandbox:hover {
  background: #4a3728;
  color: #f5f0e1;
}

/* Section headings */
.section-head {
  color: #3b2e1a;
  font-size: 1rem;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.3rem;
  margin: 1.5rem 0 0.75rem;
}

/* Timeline table */
.timeline-table td:first-child {
  font-weight: bold;
  white-space: nowrap;
  width: 100px;
}

/* Features 2-column layout */
.features-grid {
  columns: 2;
  column-gap: 2rem;
  margin-bottom: 1rem;
}

.features-grid p {
  break-inside: avoid;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}

/* Veteran section */
.veteran-quote {
  border-left: 3px solid #805d06;
  padding: 0.75rem 1rem;
  background: #eee8d5;
  margin-bottom: 1rem;
  font-style: italic;
  font-size: 0.85rem;
}

.veteran-info {
  border-left: 3px solid #1a0dab;
  padding: 0.75rem 1rem;
  background: #eee8d5;
  margin-bottom: 1rem;
  font-size: 0.85rem;
}

.veteran-info p {
  margin-bottom: 0.3rem;
}

/* Second CTA */
.landing-cta {
  text-align: center;
  margin: 2rem 0;
}

.landing-cta h2 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

/* Landing banner image (Pixel-Art — preserve sharp edges + full aspect ratio).
 *
 * v0.41.3 — switched from max-height + object-fit:cover (which cropped
 * the banner top/bottom on wide desktop viewports) to max-width + height
 * auto so the entire image is visible at every breakpoint. max-width is
 * pegged at 960px = 2x the native 480x180 — an integer scale factor keeps
 * each native pixel mapped to exactly 2x2 screen pixels, which is what
 * image-rendering pixelated needs to look crisp.
 */
.landing-banner {
  display: block;
  width: 100%;
  max-width: 960px;
  height: auto;
  margin: 0 auto 1rem auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border: 1px solid #ccc;
}

/* Landing battle image (Veteranen section, Pixel-Art).
 *
 * v0.41.3 — same fix as .landing-banner. max-width pegged at 1086px (the
 * native image width) so the full 1086x362 scene renders without crop
 * on desktop and downsizes proportionally on narrower viewports.
 */
.landing-battle {
  display: block;
  width: 100%;
  max-width: 1086px;
  height: auto;
  margin: 0 auto 0.5rem auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border: 1px solid #ccc;
}

/* Game explanation steps */
.landing-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.landing-step {
  background: #eee8d5;
  border: 1px solid #ccc;
  padding: 0.75rem;
  text-align: center;
}

.landing-step-icon {
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
}

.landing-step-title {
  font-weight: bold;
  font-size: 0.85rem;
  color: #3b2e1a;
  margin-bottom: 0.25rem;
}

.landing-step-text {
  font-size: 0.8rem;
  color: #5a4a3a;
  line-height: 1.4;
}

/* Async gameplay hint */
.landing-async-hint {
  border-left: 3px solid #1a0dab;
  background: #eee8d5;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: #3b2e1a;
  margin-bottom: 1rem;
}

/* Landing footer */
.landing-footer {
  text-align: center;
  padding: 1rem;
  color: #999;
  font-size: 0.7rem;
  border-top: 1px solid #ccc;
  margin-top: 2rem;
}

.landing-footer p {
  margin-bottom: 0.25rem;
}

.landing-footer a {
  color: #1a0dab;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .nav { flex-direction: column; }
  .nav-links { flex-wrap: wrap; justify-content: center; }
  .nav a { padding: 0.5rem 0.6rem; font-size: 0.75rem; min-height: 44px; display: inline-flex; align-items: center; }
  .nav-right { justify-content: center; padding: 0.3rem 0; }
  .container { padding: 0.5rem; max-width: 100%; overflow-x: hidden; }
  .resources-bar { flex-wrap: wrap; gap: 0.75rem; }
  table { display: block; overflow-x: auto; white-space: nowrap; max-width: calc(100vw - 1rem); }
  .fleet-form-grid { grid-template-columns: 1fr; }
  .auth-form { padding: 1.5rem; margin: 0 0.5rem; }
  .tutorial-step { flex-direction: column; }
  .tutorial-banner-header { flex-wrap: wrap; }
  .building-grid { grid-template-columns: 1fr; }
  .building-mini-grid { grid-template-columns: repeat(2, 1fr); }
  .building-list { columns: 1; }
  tr.building-locked:hover td { background-color: #f5f0e1; }
  button, .btn { min-height: 44px; }
  body { overflow-x: hidden; }
  .features-grid { columns: 1; }
  .landing-auth-box { padding: 1rem; }
  .timeline-table td:first-child { width: auto; }
  .landing-steps { grid-template-columns: repeat(2, 1fr); }
  /* v0.41.3 — mobile landing-banner/battle sizing now flows from the main
   * width:100% + max-width + height:auto rule. The old max-height overrides
   * became unnecessary once we dropped object-fit:cover. */
}

@media (max-width: 480px) {
  .landing-steps { grid-template-columns: 1fr; }
}

.messages-table td { white-space: normal; word-break: break-word; overflow-wrap: anywhere; }

/* --- Legal Pages (Impressum, Datenschutz) --- */
.legal-page {
  background-color: #f5f0e1;
}

.legal-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

.legal-container .back-link {
  display: inline-block;
  margin-bottom: 1rem;
  color: #1a0dab;
  font-size: 0.85rem;
}

.legal-container h1 {
  font-family: Georgia, 'PT Serif', serif;
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #8b7355;
  padding-bottom: 0.5rem;
}

.legal-container h2 {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  font-weight: 700;
  color: #3b2e1a;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.legal-container p {
  margin-bottom: 0.75rem;
  line-height: 1.6;
}

.legal-container ul {
  margin: 0.5rem 0 0.75rem 1.5rem;
  line-height: 1.6;
}

.legal-container li {
  margin-bottom: 0.25rem;
}

.legal-container a {
  color: #1a0dab;
}

/* --- Ranking Tabs --- */
.ranking-tabs { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 1rem; border-bottom: 2px solid #8b7355; }
.ranking-tabs a { padding: 0.4rem 0.8rem; text-decoration: none; color: #3b2e1a; border: 1px solid transparent; border-bottom: none; margin-bottom: -2px; }
.ranking-tabs a:hover { background-color: #e8e0d0; }
.ranking-tabs a.tab-active { background-color: #f5f0e1; border-color: #8b7355; border-bottom-color: #f5f0e1; font-weight: bold; }

/* --- Rank change indicators --- */
.rank-up { color: #5a8f3c; }
.rank-down { color: #c0392b; }

/* --- Pagination --- */
.pagination { display: flex; gap: 0.5rem; align-items: center; margin-top: 1rem; flex-wrap: wrap; }
.pagination a { padding: 0.2rem 0.5rem; border: 1px solid #8b7355; text-decoration: none; color: #3b2e1a; }
.pagination a:hover { background-color: #e8e0d0; }
.pagination .current-page { font-weight: bold; }

/* --- Info box for player's own rank --- */
.info-box { background-color: #e8e0d0; border: 1px solid #8b7355; padding: 0.5rem 0.8rem; margin-bottom: 1rem; }

/* --- Score formatting --- */
.score-value { font-variant-numeric: tabular-nums; text-align: right; }

/* --- MOTD Banner --- */
.motd-banner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* BUG-466: allow flex children to shrink below their intrinsic content
     width — without min-width:0, a long unbreakable URL pinned by an
     alliance MOTD would expand the banner past the mobile viewport. */
  min-width: 0;
}

.motd-info {
  border-left: 3px solid #1a0dab;
  background: #eee8d5;
}

.motd-warning {
  border-left: 3px solid #b8860b;
  background: #f5ecd0;
}

.motd-critical {
  border-left: 3px solid #6b1c1c;
  background: #f5e0e0;
}

.motd-banner .motd-message {
  flex: 1;
  /* BUG-466: pair with the .motd-banner min-width:0 so the flex child
     can shrink, and force unbreakable strings (long URLs without
     whitespace) to wrap inside the banner instead of overflowing. */
  min-width: 0;
  overflow-wrap: anywhere;
}

.motd-banner .motd-dismiss {
  margin-left: 1rem;
  flex-shrink: 0;
}

.motd-banner .motd-dismiss button {
  background: none;
  border: 1px solid #999;
  color: #666;
  padding: 0.15rem 0.5rem;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.75rem;
}

.motd-banner .motd-dismiss button:hover {
  color: #333;
  border-color: #666;
}

/* --- Player Links --- */
.player-link {
  color: #3b2e1a;
  text-decoration: none;
}
.player-link:hover {
  text-decoration: underline;
  color: #5a4a2a;
}

/* --- Player Profile --- */
.profile-header {
  border-bottom: 2px solid #8b7355;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
}
.profile-header h1 {
  margin-bottom: 0.25rem;
}
.profile-meta-line {
  color: #666;
  font-size: 0.9em;
}
.profile-stats {
  margin: 1rem 0;
}
.profile-stats table {
  width: auto;
}
.profile-stats th {
  text-align: left;
  padding-right: 1.5rem;
  font-weight: normal;
  color: #666;
}
.profile-stats td {
  font-weight: bold;
}
.profile-bio {
  margin: 1rem 0;
  padding: 1rem;
  background: #fff;
  border: 1px solid #d4c4a0;
  border-radius: 3px;
}
.profile-bio h2 {
  margin-bottom: 0.5rem;
  font-size: 1.1em;
}
.profile-bio-empty {
  color: #999;
  font-style: italic;
}
.profile-footer {
  margin-top: 1rem;
  color: #888;
  font-size: 0.85em;
}

/* Profile edit */
.profile-preview {
  margin: 1rem 0;
  padding: 1rem;
  background: #fffcf0;
  border: 2px dashed #d4c4a0;
  border-radius: 3px;
}
.profile-preview h2 {
  margin-bottom: 0.5rem;
  font-size: 1.1em;
  color: #666;
}
.bbcode-help {
  margin: 0.5rem 0;
}
.bbcode-help summary {
  cursor: pointer;
  color: #666;
  font-size: 0.9em;
}
.bbcode-help ul {
  margin-top: 0.5rem;
  padding-left: 1.5rem;
  font-size: 0.85em;
}
.bbcode-help li {
  margin-bottom: 0.25rem;
}
/* BBCode rendered content */
.profile-bio img {
  max-width: 200px;
  max-height: 200px;
}

/* --- Changelog --- */
.changelog-section { margin-bottom: 2rem; }
.changelog-section details { margin-bottom: 0.5rem; border: 1px solid #ddd; background: #fff; }
.changelog-section summary { padding: 0.6rem 0.8rem; cursor: pointer; background: #e8e0d0; font-weight: bold; font-size: 0.9rem; }
.changelog-section summary:hover { background: #ddd5c0; }
.changelog-section details[open] summary { border-bottom: 1px solid #ddd; }
.changelog-entries { padding: 0.6rem 0.8rem; }
.changelog-entry { margin-bottom: 0.4rem; }
.cl-added { color: #2d6a1e; font-weight: bold; font-size: 0.8rem; }
.cl-changed { color: #1a0dab; font-weight: bold; font-size: 0.8rem; }
.cl-fixed { color: #b8860b; font-weight: bold; font-size: 0.8rem; }
.cl-removed { color: #8b3a3a; font-weight: bold; font-size: 0.8rem; }
.changelog-body { margin-left: 1rem; font-size: 0.85rem; color: #444; }
.changelog-body ul { margin: 0.2rem 0 0.2rem 1.2rem; }
.changelog-body p { margin: 0.2rem 0; }

/* --- Suggestions / Roadmap --- */
.roadmap-section { margin-top: 2rem; }
.suggestion { display: flex; gap: 0.75rem; padding: 0.75rem; border: 1px solid #ddd; background: #fff; margin-bottom: 0.5rem; }
.suggestion-vote { display: flex; flex-direction: column; align-items: center; min-width: 3rem; }
.vote-form { display: flex; flex-direction: column; align-items: center; }
.vote-btn { background: none; border: 1px solid #ccc; padding: 0.15rem 0.4rem; cursor: pointer; font-size: 0.85rem; color: #666; min-width: 2rem; text-align: center; line-height: 1; }
.vote-btn:hover { background: #e8e0d0; border-color: #999; color: #3b2e1a; }
.vote-btn.voted { font-weight: bold; }
.vote-up.voted { background: #5a8f3c; color: #fff; border-color: #4a7a30; }
.vote-down.voted { background: #c0392b; color: #fff; border-color: #922b21; }
.vote-count { font-weight: bold; font-size: 0.9rem; color: #3b2e1a; margin: 0.15rem 0; }
.vote-count-nologin { font-weight: bold; font-size: 0.9rem; color: #999; }
.suggestion-content { flex: 1; min-width: 0; }
.suggestion-header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; cursor: pointer; list-style: none; }
.suggestion-header::-webkit-details-marker { display: none; }
.suggestion-title { font-weight: bold; font-size: 0.9rem; }
.suggestion-desc { font-size: 0.85rem; color: #444; margin: 0.3rem 0; }
.suggestion-meta { font-size: 0.75rem; color: #999; margin-top: 0.3rem; }
.suggestion-meta a { color: #999; }
.suggestion-meta a:hover { color: #3b2e1a; }
.admin-response { font-size: 0.8rem; color: #3b2e1a; background: #f5f0e1; border-left: 3px solid #d4a017; padding: 0.3rem 0.5rem; margin: 0.3rem 0; }
.reddit-link { font-size: 0.8rem; display: inline-block; margin-top: 0.3rem; }
.login-hint { background: #fdf8e8; border: 1px solid #d4a017; padding: 0.5rem 0.75rem; font-size: 0.85rem; color: #8b6914; margin-bottom: 1rem; }
.changelog-login-hint { background: #eee8d5; border-left: 3px solid #1a0dab; padding: 8px 12px; margin-bottom: 1rem; font-size: 0.9rem; }
.changelog-login-hint a { color: #1a0dab; font-weight: bold; }

/* Back link (changelog, legal pages) */
.back-link { display: inline-block; margin-bottom: 0.5rem; color: #1a0dab; text-decoration: none; font-size: 0.9rem; }
.back-link:hover { text-decoration: underline; }

/* Status badges */
.status-badge { font-size: 0.7rem; padding: 0.1rem 0.4rem; font-weight: bold; display: inline-block; }
.status-open { background: #e0e0e0; color: #666; }
.status-planned { background: #d0e4f5; color: #1a5276; }
.status-in_progress { background: #fdf2d0; color: #8b6914; }
.status-completed { background: #d4edda; color: #2d6a1e; }
.status-declined { background: #f0d0d0; color: #8b3a3a; }

/* Feedback filters */
.feedback-filters { margin-bottom: 1rem; font-size: 0.8rem; }
.feedback-filter-row { margin-bottom: 0.3rem; line-height: 1.8; }
.feedback-filter-row a { margin: 0 0.2rem; color: #5a3e1b; text-decoration: none; }
.feedback-filter-row a:hover { text-decoration: underline; }
.feedback-filter-row a.filter-active { font-weight: bold; text-decoration: underline; }

/* Feedback radio group */
.feedback-radio-group { display: flex; gap: 1rem; }
.feedback-radio { font-size: 0.85rem; cursor: pointer; }
.feedback-radio input { margin-right: 0.2rem; }

/* Submit form */
.suggest-form { margin-bottom: 1.5rem; padding: 1rem; border: 1px solid #ddd; background: #fff; }
.suggest-form h3 { margin-bottom: 0.75rem; border-bottom: none; }

/* Filter bar (legacy compat) */
.filter-bar { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.filter-bar a { padding: 0.3rem 0.6rem; border: 1px solid #ccc; font-size: 0.8rem; color: #555; text-decoration: none; }
.filter-bar a:hover { background: #e8e0d0; border-color: #999; }
.filter-bar a.active { background: #3b2e1a; color: #d4c5a0; border-color: #3b2e1a; }

/* News items on changelog page */
.news-items { margin-bottom: 2rem; }
.news-item { padding: 0.5rem 0; border-bottom: 1px solid #eee; font-size: 0.85rem; word-break: break-word; overflow-wrap: anywhere; }
.news-item:last-child { border-bottom: none; }
.news-date { color: #999; font-size: 0.75rem; margin-right: 0.5rem; }
.news-type { font-weight: bold; font-size: 0.75rem; margin-right: 0.5rem; }

/* --- Alliance Profile --- */
.alliance-link { text-decoration: none; color: #5a8f3c; font-weight: bold; }
.alliance-link:hover { text-decoration: underline; }

.alliance-profile-header { margin-bottom: 1rem; }
.alliance-profile-header h1 { border-bottom: none; margin-bottom: 0.25rem; }
.alliance-motto { font-style: italic; color: #666; margin-top: 0.25rem; }

.alliance-stats { margin-bottom: 1rem; }
.alliance-stats table { width: auto; }
.alliance-stats th { text-align: left; padding-right: 1rem; color: #666; }
.alliance-stats td { font-weight: bold; }

.alliance-text-tier { background: #fff; border: 1px solid #ddd; padding: 0.75rem; margin-bottom: 0.75rem; }
.alliance-text-tier h3 { font-size: 0.9rem; margin-bottom: 0.5rem; color: #555; border-bottom: 1px solid #eee; padding-bottom: 0.25rem; }
.alliance-text-content { line-height: 1.6; }
.alliance-text-content img { max-width: 200px; max-height: 200px; }

.alliance-tier-public { border-left: 3px solid #5a8f3c; }
.alliance-tier-confederate { border-left: 3px solid #4a90d9; }
.alliance-tier-internal { border-left: 3px solid #d4a017; }
.alliance-tier-closed { border-left: 3px solid #a03030; }
.alliance-tier-application { border-left: 3px solid #888; }

.diplomacy-ally { color: #5a8f3c; font-weight: bold; }
.diplomacy-nap { color: #4a90d9; font-weight: bold; }
.diplomacy-enemy { color: #a03030; font-weight: bold; }
.diplomacy-mutual { color: #5a8f3c; }
.diplomacy-one-sided { color: #999; }

/* --- Alliance Actions --- */
.alliance-actions { display: flex; flex-direction: column; gap: 8px; max-width: 300px; }
.alliance-actions .btn, .alliance-actions button { display: block; width: 100%; }
.alliance-actions form { margin: 0; }

/* --- Alliance Chat --- */
.chat-messages { border: 1px solid #ccc; max-height: 600px; overflow-y: auto; overflow-x: hidden; max-width: 100%; box-sizing: border-box; }
.chat-message { padding: 0.35rem 0.5rem; font-size: 0.85rem; background: #eee8d5; word-break: break-word; overflow-wrap: anywhere; }
.chat-message-even { background: #f5f0e1; }
.chat-message-own { border-left: 3px solid #2d5a27; }
.chat-message-system { font-style: italic; color: #6b5d4e; }
.chat-timestamp { color: #999; font-size: 0.75rem; }
.chat-rank-badge { color: #8b6914; font-size: 0.75rem; font-weight: bold; }
.chat-load-older { text-align: center; padding: 0.5rem 0; }
.chat-input-form { margin-top: 0.75rem; }
.chat-input-form textarea { width: 100%; }

/* --- Social Share --- */
.share-section { background: #eee8d5; border: 1px solid #ccc; padding: 0.75rem; margin-top: 1rem; }
.share-section h3 { margin-bottom: 0.5rem; }
.share-copy { display: flex; gap: 0.35rem; align-items: center; }
.share-url-input { flex: 1; font-size: 0.8rem; padding: 0.25rem 0.4rem; border: 1px solid #ccc; background: #fff; }

/* --- Share Links (Pipe-separated, retro) --- */
.share-links {
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  margin: 0.4rem 0;
}
.share-links a {
  text-decoration: none;
}
.share-links a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .alliance-actions { max-width: 100%; }
  .share-copy { flex-direction: column; }
}

/* --- Settings Page --- */
.settings-section { margin-bottom: 1.5rem; padding: 1rem; background: #fff; border: 1px solid #ccc; }
.settings-section h2 { margin-bottom: 0.75rem; color: #3b2e1a; border-bottom: 1px solid #ddd; padding-bottom: 0.3rem; }
.settings-checkbox-group { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0; }
.settings-checkbox-group label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.settings-checkbox-group label.disabled { color: #999; cursor: not-allowed; }
.settings-hint { font-size: 0.85rem; color: #666; margin-top: 0.5rem; }
/* Linked Accounts (SSO-2) */
.linked-account-row { display: grid; grid-template-columns: 120px 1fr auto; gap: 0.75rem; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid #eee; }
.linked-account-row:last-of-type { border-bottom: none; }
.linked-account-label { font-weight: bold; color: #3b2e1a; }
.linked-account-status { color: #5c4a2a; font-size: 0.9rem; }
.linked-account-action { text-align: right; }
.linked-account-disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 520px) {
  .linked-account-row { grid-template-columns: 1fr; gap: 0.25rem; }
  .linked-account-action { text-align: left; }
}
.email-status { font-size: 0.85rem; margin-top: 0.25rem; }
.email-status.verified { color: #2d7a2d; }
.email-status.unverified { color: #cc7700; }
.nav-settings { font-size: 1rem; padding: 0.5rem 0.3rem !important; }

/* --- v0.31.0 Notruf (distress-call) styles --- */
.topbar-distress {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  margin: 0 6px;
  background: #b22222;
  color: #fff !important;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  animation: distress-pulse 2s ease-in-out infinite;
}
.topbar-distress:hover { background: #8b0000; }
.topbar-distress-count {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 4px;
  background: #fff;
  color: #b22222;
  border-radius: 999px;
  font-size: 0.85em;
  text-align: center;
}
@keyframes distress-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(178, 34, 34, 0.7); }
  50% { box-shadow: 0 0 0 6px rgba(178, 34, 34, 0); }
}
.distress-affordance {
  background: #fff3cd;
  border: 2px solid #b22222;
  border-radius: 6px;
  padding: 12px 16px;
  margin: 12px 0;
}
.distress-affordance.is-active { background: #d4edda; border-color: #2d6b2d; }
.distress-affordance.is-cooldown { background: #f5f0e1; border-color: #ccc; opacity: 0.85; }
.distress-affordance h3 { margin: 0 0 8px 0; }
.distress-affordance .btn-distress,
.btn-distress {
  background: #b22222; color: #fff; border: none; padding: 8px 16px;
  border-radius: 4px; cursor: pointer; font-weight: 600;
}
.distress-affordance .btn-distress:disabled,
.btn-distress:disabled {
  background: #aaa; cursor: not-allowed;
}
.notruf-detail .responders { background: #f5f0e1; padding: 8px 12px; border-radius: 4px; margin: 12px 0; }
.notruf-detail .travel-list li { margin: 4px 0; }
.notruf-detail .travel-ok { color: #2d6b2d; font-weight: 600; margin-left: 8px; }
.notruf-detail .travel-late { color: #b22222; margin-left: 8px; }
.notruf-list-item { padding: 12px; border-bottom: 1px solid #ccc; list-style: none; }
.notruf-list-item a { color: #3b2e1a; text-decoration: none; display: block; }
.notruf-list-item:hover { background: #f5f0e1; }
.notruf-list { padding-left: 0; }
.notruf-quick-send label { display: block; margin: 8px 0; }
.notruf-quick-send select { min-width: 200px; }
.loyalty-warning {
  background: #fff3cd;
  border-left: 4px solid #b22222;
  padding: 8px 12px;
  margin: 12px 0;
}
.closed-banner {
  background: #e0e0e0;
  border-left: 4px solid #888;
  padding: 8px 12px;
  margin: 12px 0;
}
@media (max-width: 768px) {
  .topbar-distress { padding: 2px 6px; margin: 0 3px; font-size: 0.85rem; }
  .distress-affordance .btn-distress,
  .btn-distress { width: 100%; }
  .notruf-quick-send select { width: 100%; }
}

/* --- Email Enforcement Banner (persistent, non-dismissable) --- */
.email-enforcement-banner {
  padding: 10px 16px;
  border: 2px solid #8B6914;
  background: #FFF8DC;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9rem;
  color: #5c4a00;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.email-enforcement-banner a.email-enforcement-cta,
.email-enforcement-banner button.email-enforcement-cta {
  background: #8B6914;
  color: #FFF8DC;
  border: 1px solid #6b5010;
  padding: 4px 12px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  font-weight: bold;
}
.email-enforcement-banner a.email-enforcement-cta:hover,
.email-enforcement-banner button.email-enforcement-cta:hover {
  background: #6b5010;
}
.email-enforcement-success {
  border-color: #2d7a2d;
  background: #e8f5e9;
  color: #1b5e20;
}
/* --- Email Required Page (Phase 2+3 enforcement) --- */
.email-required-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  background: #eee8d5;
  border-bottom: 2px solid #c0b896;
  font-family: 'Courier New', Courier, monospace;
}
.email-required-logo {
  font-weight: bold;
  font-size: 1.1rem;
  color: #5c4a00;
}
.email-required-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.email-required-nav a {
  color: #5c4a00;
  text-decoration: none;
  font-size: 0.85rem;
}
.email-required-nav a:hover { text-decoration: underline; }
.email-required-nav button {
  background: none;
  border: 1px solid #c0b896;
  padding: 2px 8px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.8rem;
  cursor: pointer;
  color: #5c4a00;
}
.email-required-content {
  max-width: 500px;
  margin: 2rem auto;
  padding: 1.5rem;
  background: #FFF8DC;
  border: 2px solid #c0b896;
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.9rem;
  line-height: 1.6;
}
.email-required-content h1 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #5c4a00;
}
.email-required-content p {
  margin-bottom: 0.75rem;
  color: #333;
}
.email-required-content input[type="email"] {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #c0b896;
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
  background: #fff;
  box-sizing: border-box;
}
.email-required-content .btn-primary {
  background: #8B6914;
  color: #FFF8DC;
  border: 1px solid #6b5010;
  padding: 0.5rem 1rem;
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.9rem;
  cursor: pointer;
  font-weight: bold;
}
.email-required-content .btn-primary:hover {
  background: #6b5010;
}
.email-required-content .btn-secondary {
  background: #eee8d5;
  color: #5c4a00;
  border: 1px solid #c0b896;
  padding: 0.4rem 0.8rem;
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.85rem;
  cursor: pointer;
}
.email-required-hint {
  font-size: 0.8rem;
  color: #888;
  margin-top: 0.5rem;
}
.email-required-skip {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px dashed #c0b896;
  text-align: center;
}
.email-required-deadline {
  font-size: 0.85rem;
  color: #cc7700;
  margin-bottom: 0.75rem;
}
.email-required-skip button {
  background: #eee8d5;
  color: #5c4a00;
  border: 1px solid #c0b896;
  padding: 0.4rem 1rem;
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.85rem;
  cursor: pointer;
}
.email-required-skip button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.email-required-hardlock {
  margin-top: 1.5rem;
  padding: 1rem;
  background: #fde8e8;
  border: 2px solid #c62828;
  color: #c62828;
  font-weight: bold;
  font-size: 0.9rem;
  line-height: 1.5;
}
.email-required-success {
  color: #2d7a2d;
  font-weight: bold;
}
.email-required-error {
  color: #c62828;
  font-weight: bold;
  margin-bottom: 0.75rem;
}
/* Quest Logbook */
.quest-overview { margin-bottom: 1.5em; }
.quest-overview-stats { font-size: 0.95em; color: #666; margin: 0.3em 0; }
.quest-reward-flash { background: #eee8d5; border: 1px solid #2d5a27; padding: 0.5em 1em; margin-bottom: 1em; }
.quest-new-path-flash { background: #eee8d5; border: 1px solid #b8860b; padding: 0.5em 1em; margin-bottom: 0.5em; }
.quest-path { border: 1px solid #ddd; margin-bottom: 1.5em; padding: 0; }
.quest-path-header { background: #eee8d5; padding: 0.7em 1em; border-bottom: 1px solid #ddd; display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; }
.quest-path-header h2 { margin: 0; font-size: 1.1em; flex: 1; }
.quest-path-progress { font-size: 0.85em; color: #666; }
.quest-path-desc { padding: 0.3em 1em; margin: 0; font-size: 0.9em; color: #555; }
.quest-path-locked { opacity: 0.6; }
.quest-path-locked .quest-path-header { background: #eee; }
.quest-path-unlock { padding: 0.5em 1em; font-size: 0.85em; color: #999; font-style: italic; }
.quest-progress-bar { height: 4px; background: #eee8d5; margin: 0; }
.quest-progress-fill { height: 100%; background: #2d5a27; transition: width 0.3s; }
.quest-steps { padding: 0; }
.quest-step { display: flex; align-items: center; padding: 0.5em 1em; border-bottom: 1px solid #f0f0f0; gap: 0.5em; }
.quest-step:last-child { border-bottom: none; }
.quest-step-icon { width: 1.5em; text-align: center; font-weight: bold; flex-shrink: 0; }
.quest-step-content { flex: 1; }
.quest-step-title { font-size: 0.95em; }
.quest-step-title-claimed { text-decoration: line-through; color: #999; }
.quest-step-reward { font-size: 0.8em; color: #888; }
.quest-prereq-hint { font-size: 0.85em; color: #b8860b; margin-top: 2px; }
.quest-step-claimed { color: #999; }
.quest-step-claimed .quest-step-icon { color: #2d5a27; }
.quest-step-completed { background: #f5ecd0; }
.quest-step-completed .quest-step-icon { color: #b8860b; }
.quest-step-active { background: #fff8e1; }
.quest-step-active .quest-step-title { font-weight: bold; }
.quest-step-locked { color: #bbb; }
.quest-claim-btn { font-size: 0.8em; padding: 0.2em 0.6em; background: #2d5a27; color: #f5f0e1; border: none; cursor: pointer; white-space: nowrap; }
.quest-claim-btn:hover { background: #1e3d1a; }
.quest-claimed-label { font-size: 0.8em; color: #999; }
/* Quest banner on island page */
.quest-banner { border: 1px solid #ddd; padding: 0.7em 1em; margin-bottom: 1em; background: #fafafa; }
.quest-banner-header { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.3em; }
.quest-banner-title { font-weight: bold; }
.quest-banner-badge { background: #b8860b; color: #f5f0e1; font-size: 0.75em; padding: 0.1em 0.5em; }
.quest-banner-link { font-size: 0.85em; margin-left: auto; }
.quest-banner-flash { color: #2d5a27; font-size: 0.9em; margin: 0.3em 0; }
.quest-banner-next { font-size: 0.9em; color: #555; margin: 0.3em 0; }

/* --- Quest Desktop Sidebar --- */
.quest-sidebar {
  flex: 0 0 240px;
  max-width: 240px;
  padding-top: 1rem;
  position: sticky;
  top: 0;
  align-self: flex-start;
  max-height: 100vh;
  overflow-y: clip;
}
.quest-sidebar-box {
  background: #eee8d5;
  border: 1px solid #ccc;
  padding: 0.75rem;
  font-size: 0.85rem;
}
.quest-sidebar-title {
  font-weight: bold;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.quest-sidebar-title a { color: #1a1a1a; text-decoration: none; }
.quest-sidebar-title a:hover { text-decoration: underline; }
.quest-sidebar-path {
  padding: 0.15rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quest-sidebar-path a { color: #3b2e1a; text-decoration: none; }
.quest-sidebar-path a:hover { text-decoration: underline; }
.quest-sidebar-reward { color: #b8860b; }
.quest-sidebar-locked { color: #999; }
.quest-sidebar-progress { color: #666; font-size: 0.8rem; }
.quest-sidebar-done a { color: #999; }

/* --- FEAT-093 Boost Campaign Card --- */
.boost-card {
  background: #fff8e1;
  border: 1px solid #b8860b;
  padding: 0.6rem 0.75rem;
  margin-top: 0.75rem;
  font-size: 0.82rem;
  font-family: 'Courier New', Courier, monospace;
}
.boost-card-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
}
.boost-card-icon { font-size: 1rem; }
.boost-card-headline {
  font-weight: bold;
  color: #b8860b;
  letter-spacing: 0.5px;
  font-size: 0.78rem;
  text-transform: uppercase;
}
.boost-card-subtitle {
  font-size: 0.78rem;
  color: #666;
  margin-bottom: 0.5rem;
}
.boost-card-name {
  font-weight: bold;
  font-size: 0.88rem;
  margin-bottom: 0.4rem;
  color: #1a1a1a;
}
.boost-card-custom {
  font-size: 0.78rem;
  color: #3b2e1a;
  margin: 0.3rem 0;
  font-style: italic;
}
.boost-card-section { margin: 0.3rem 0; }
.boost-card-section-label {
  font-size: 0.74rem;
  color: #666;
}
.boost-card-bonus { color: #2d5a27; font-weight: bold; }
.boost-card-ends {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: #b8860b;
}
.boost-card-share {
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px dashed #ccc;
  font-size: 0.78rem;
}
.boost-card-share a { color: #3b2e1a; }
.boost-share-copy {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.78rem;
  background: transparent;
  border: 1px solid #b8860b;
  padding: 1px 6px;
  color: #b8860b;
  cursor: pointer;
}

/* Mobile note above quest-mobile-banner */
.boost-mobile-note {
  background: #fff8e1;
  border-bottom: 1px solid #b8860b;
  padding: 4px 12px;
  font-size: 0.82rem;
  text-align: center;
}
.boost-mobile-note a {
  color: #b8860b;
  text-decoration: none;
  font-weight: bold;
}
.boost-mobile-note a:hover { text-decoration: underline; }

/* Hide desktop card at mobile breakpoint, hide mobile note at desktop */
@media (max-width: 1099px) {
  .quest-sidebar .boost-card { display: none; }
}
@media (min-width: 1100px) {
  .boost-mobile-note { display: none; }
}

/* --- Quest Mobile Banner --- */
.quest-mobile-banner {
  background: #eee8d5;
  border-bottom: 1px solid #ccc;
  padding: 4px 12px;
  font-size: 0.85rem;
  text-align: center;
}
.quest-mobile-banner a { color: #3b2e1a; text-decoration: none; margin: 0 0.3rem; }
.quest-mobile-banner a:hover { text-decoration: underline; }
.quest-mobile-banner .quest-mobile-reward { color: #b8860b; }

/* --- Responsive: Sidebar vs Banner --- */
@media (min-width: 1100px) {
  .quest-mobile-banner { display: none; }
}
@media (max-width: 1099px) {
  .quest-sidebar { display: none; }
  .page-layout { display: block; }
}

/* --- Activity Log (v0.25.0 Welle 3) --- */
.activity-log {
  flex: 0 0 220px;
  max-width: 220px;
  padding-top: 1rem;
  position: sticky;
  top: 0;
  align-self: flex-start;
  max-height: 100vh;
  overflow-y: clip;
}
.activity-log-box {
  background: #eee8d5;
  border: 1px solid #ccc;
  padding: 0.75rem;
  font-size: 0.8rem;
  max-height: 180px;
  overflow-y: auto;
}
.activity-log-title {
  font-weight: bold;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  color: #1a1a1a;
}
/* v0.81.1 — desktop widget title is a link to the full-page logbook. */
.activity-log-title a { color: inherit; text-decoration: none; }
.activity-log-title a:hover { text-decoration: underline; }
.activity-log-empty { color: #888; font-style: italic; font-size: 0.8rem; }
.activity-log-lines { line-height: 1.3; }
.activity-log-line {
  padding: 0.15rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #3b2e1a;
}
.activity-log-line a { color: #3b2e1a; text-decoration: none; }
.activity-log-line a:hover { text-decoration: underline; }
.activity-log-unseen { font-weight: bold; }

.activity-log-mobile {
  background: #eee8d5;
  border-bottom: 1px solid #ccc;
  padding: 4px 12px;
  font-size: 0.8rem;
  text-align: center;
}
.activity-log-mobile a { color: #3b2e1a; text-decoration: none; }
.activity-log-mobile a:hover { text-decoration: underline; }

/* --- Mobile Logbuch Panel (v0.26.0) --- */
.activity-log-mobile-panel {
  background: #eee8d5;
  border: 1px solid #ccc;
  border-left: none;
  border-right: none;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
}
.activity-log-mobile-title {
  font-weight: bold;
  font-size: 0.85rem;
  color: #1a1a1a;
  margin-bottom: 0.3rem;
}
.activity-log-mobile-line {
  padding: 0.15rem 0;
  line-height: 1.3;
  color: #3b2e1a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-log-mobile-line a { color: #3b2e1a; text-decoration: none; }
.activity-log-mobile-line a:hover { text-decoration: underline; }
/* v0.26.0 — "extra" lines live in DOM so the overlay JS can lift them
   fullscreen, but stay hidden in the default compact panel view. */
.activity-log-mobile-panel .activity-log-mobile-line--extra { display: none; }
.activity-log-mobile-cta {
  display: inline-block;
  margin-top: 0.35rem;
  color: #3b2e1a;
  text-decoration: none;
  font-weight: 600;
}
.activity-log-mobile-cta:hover { text-decoration: underline; }

/* --- Fullscreen Overlay (v0.26.0) --- */
.activity-log-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #f5efd7;
  z-index: 1000;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  box-sizing: border-box;
}
.activity-log-overlay-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid #d3c5a4;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
}
.activity-log-overlay-head h1 {
  margin: 0;
  font-size: 1.1rem;
  color: #1a1a1a;
}
.activity-log-overlay-close-form { margin: 0; }
.activity-log-overlay-close {
  border: none;
  background: none;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  color: #3b2e1a;
  padding: 0 0.35rem;
}
.activity-log-overlay-close:hover { color: #8b0000; }
.activity-log-overlay-lines { line-height: 1.4; }
.activity-log-overlay-line {
  padding: 0.25rem 0;
  color: #3b2e1a;
  border-bottom: 1px solid #e8dfc3;
}
.activity-log-overlay-line a { color: #3b2e1a; text-decoration: none; }
.activity-log-overlay-line a:hover { text-decoration: underline; }
.activity-log-overlay-empty {
  color: #6b5b42;
  font-style: italic;
  padding: 2rem 1rem;
  text-align: center;
}

@media (min-width: 1100px) {
  .activity-log-mobile { display: none; }
  .activity-log-mobile-panel { display: none; }
  .activity-log-overlay { display: none; }
  /* v0.81.1 — but the STANDALONE logbook page (nav "Logbook" / desktop widget
     header) re-shows the fullscreen overlay on desktop. Page-scoped so the
     inline mobile-banner overlay on other pages stays desktop-hidden. */
  .page-layout.logbook-page .activity-log-overlay { display: block; }
}
@media (max-width: 1099px) {
  .activity-log { display: none; }
}

/* --- Reward Flash (v0.25.0 Welle 3) --- */
.flash-reward { background-color: #eee8d5; }

/* --- Build Spinner (v0.25.0 Welle 3) --- */
.build-spinner {
  display: inline-block;
  width: 1ch;
  margin: 0 0.25rem;
  color: #6b5b42;
  font-family: inherit;
}

/* --- First-Crew Screen (v0.25.0 Welle 1) --- */
.first-crew-title { margin-bottom: 0.3rem; }
.first-crew-subtitle { color: #6b5b42; margin-bottom: 1.5rem; font-size: 0.95rem; }
.first-crew-primary {
  background: #f0e6d0;
  border: 2px solid #c4a882;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}
.first-crew-primary-head {
  font-size: 1.3rem;
  margin-bottom: 0.3rem;
}
.first-crew-primary-tag {
  font-weight: bold;
  color: #4a3728;
  margin-right: 0.5rem;
}
.first-crew-primary-name { color: #4a3728; }
.first-crew-primary-meta {
  display: flex;
  gap: 1.5rem;
  color: #6b5b42;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.first-crew-primary-tier { color: #4a3728; }
.first-crew-motto {
  font-style: italic;
  color: #6b5b42;
  margin-bottom: 0.75rem;
}
.first-crew-join-form { margin-top: 1rem; margin-bottom: 0; }
.first-crew-toggle { margin-bottom: 1rem; }
.first-crew-toggle a { color: #4a3728; }
.first-crew-alternatives { margin-bottom: 1.5rem; }
.first-crew-alt-table { width: 100%; border-collapse: collapse; }
.first-crew-alt-table td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid #d3c5a4;
  font-size: 0.9rem;
}
.first-crew-dismiss { margin-top: 2rem; }
.first-crew-dismiss .btn-link {
  background: none;
  border: none;
  color: #8a7c67;
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0;
}
.first-crew-empty { color: #6b5b42; padding: 2rem; text-align: center; }

/* --- Building Tips --- */
.building-tip-box {
  background: #eee8d5;
  border-left: 3px solid #1a0dab;
  padding: 0.5rem 0.75rem;
  margin-top: 0.3rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}
.building-tip { padding: 0.15rem 0; color: #3b2e1a; }
.building-tip-quest { color: #2d5a27; font-weight: bold; }
.tips-toggle {
  background: none;
  border: none;
  color: #999;
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.tips-toggle:hover { color: #666; }

/* --- Beachcombing (Strandgut) --- */
.beachcombing-box {
  background-color: #e8e0d0;
  border: 2px solid #b8860b;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}

.beachcombing-collected {
  background-color: #eaf5ea;
  border-color: #5a8f3c;
  color: #2d6a1e;
}

.beachcombing-header {
  margin-bottom: 0.3rem;
}

.beachcombing-title {
  font-weight: 700;
  font-size: 0.9rem;
}

.beachcombing-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.beachcombing-reward {
  font-size: 0.85rem;
}

.beachcombing-btn {
  font-size: 0.8rem;
  padding: 0.25rem 0.75rem;
}

.beachcombing-form {
  display: inline;
}

/* --- Daily Order (Tagesbefehl) --- */
.daily-order-box {
  background-color: #eee8d5;
  border-left: 3px solid #b8860b;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.85rem;
}

.daily-order-claimed {
  color: #6b5d4e;
}

.daily-order-completed {
  background-color: #eaf5ea;
}

.daily-order-header {
  margin-bottom: 0.3rem;
  font-weight: 700;
}

.daily-order-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.daily-order-btn {
  font-size: 0.8rem;
  padding: 0.25rem 0.75rem;
}

.daily-order-form {
  display: inline;
}

/* --- Speed Bonus Indicator --- */
.speed-bonus-indicator {
  background-color: #fff3cd;
  border: 1px solid #b8860b;
  padding: 0.3rem 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  color: #3b2e1a;
}

/* --- Sidebar Daily Indicators --- */
.quest-sidebar-daily {
  border-top: 1px solid #ddd5c5;
  margin-top: 0.3rem;
  padding-top: 0.3rem;
  font-size: 0.75rem;
}

.quest-sidebar-daily a {
  text-decoration: none;
  color: #1a0dab;
}

.quest-sidebar-daily-done {
  color: #6b5d4e;
}

/* --- Promo Code Section (Quest Page) --- */
.promo-code-section { margin-top: 2rem; padding: 1rem; border: 1px solid #d4c9a8; background: #faf6ed; }
.promo-code-section h2 { margin: 0 0 0.5rem 0; font-size: 1rem; }
.promo-code-form { display: flex; gap: 0.5rem; align-items: center; }
.promo-code-input { flex: 1; padding: 0.4rem 0.6rem; border: 1px solid #c8b888; font-size: 0.9rem; max-width: 250px; }

/* --- Referral Section (Profile Page) --- */
.profile-referred-by { margin: 0.5rem 0; color: #666; }
.referral-section { margin-top: 1.5rem; padding: 1rem; border: 1px solid #d4c9a8; background: #faf6ed; }
.referral-section h2 { margin: 0 0 0.5rem 0; }
.referral-section h3 { margin: 0.75rem 0 0.25rem 0; font-size: 0.95rem; }
.referral-link-box { margin: 0.5rem 0; }
.referral-link-input { width: 100%; max-width: 400px; padding: 0.4rem 0.6rem; border: 1px solid #c8b888; font-size: 0.85rem; background: #fff; cursor: text; }
.referral-list { list-style: none; padding: 0; margin: 0.5rem 0; }
.referral-list li { padding: 0.3rem 0; border-bottom: 1px solid #eee; }
.referral-stats { font-size: 0.85rem; color: #666; margin: 0.5rem 0; }

/* --- Referral Invite Box (Landing Page) --- */
.referral-invite-box { padding: 1rem; margin: 1rem 0; background: #f8f4e8; border: 1px solid #d4c9a8; text-align: center; }
.referral-invite-box h2 { margin: 0 0 0.5rem 0; color: #5a4a2a; }
.referral-coords { font-size: 0.85rem; color: #888; }
.referral-benefits { text-align: left; margin: 0.5rem auto; max-width: 400px; }
.referral-benefits h3 { font-size: 0.95rem; margin: 0.75rem 0 0.25rem; }
.referral-benefits ul { margin: 0; padding-left: 1.2rem; }
.referral-benefits li { margin: 0.2rem 0; font-size: 0.9rem; }

/* --- Referral Hint Box (Island Page) --- */
.referral-hint-box {
  border-left: 3px solid #b8860b;
  background: #f5ecd0;
  padding: 0.6rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.referral-hint-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3rem;
  font-weight: bold;
}
.referral-hint-box .btn-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: #666;
  padding: 0 0.3rem;
}
.referral-hint-box p {
  margin: 0.3rem 0;
  color: #3b2e1a;
}

/* --- Referral Invite Section (Quest Page) --- */
.referral-invite-section {
  border-left: 3px solid #b8860b;
  background: #eee8d5;
  padding: 1rem;
  margin: 1.5rem 0;
}
.referral-invite-section h2 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
}

/* --- Compact Referral Banner (Quest Page Top) --- */
.referral-banner {
  border-left: 3px solid #b8860b;
  background: #eee8d5;
  padding: 0.6rem 0.8rem;
  margin: 0.75rem 0;
}
.referral-banner-headline {
  font-weight: bold;
  margin: 0 0 0.2rem 0;
}
.referral-banner-sub {
  margin: 0 0 0.4rem 0;
  font-size: 0.88rem;
}
.referral-banner .share-copy {
  margin: 0;
}

/* --- Referral Stats Section (Eingeladene Seeleute) --- */
.referral-stats-section {
  border-top: 1px solid #ddd;
  padding-top: 1rem;
  margin-top: 2rem;
}
.referral-stats-section h2 {
  font-size: 1rem;
  margin: 0 0 0.5rem 0;
}

/* --- Quest Path <details>/<summary> --- */
.quest-path summary {
  cursor: pointer;
  padding: 0.7em 1em;
  background: #eee8d5;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
  gap: 0.5em;
  flex-wrap: wrap;
  list-style: none;
}
.quest-path summary::-webkit-details-marker { display: none; }
.quest-path summary::marker { content: ''; }
.quest-path summary h2 {
  margin: 0;
  font-size: 1rem;
  display: inline;
}

/* --- Quest Share Prompt --- */
.quest-share-prompt {
  border-left: 3px solid #b8860b;
  background: #f5ecd0;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
}

/* --- Sidebar Referral --- */
.quest-sidebar-referral {
  margin-top: 0.3rem;
  padding-top: 0.3rem;
  border-top: 1px solid #ddd5c5;
}
.quest-sidebar-referral a {
  font-size: 0.85rem;
}
.quest-sidebar-referral-highlight a {
  color: #b8860b;
  font-weight: bold;
}

/* --- Map page: sidebar below content, not sticky --- */
.page-map {
  flex-direction: column;
}
.page-map .quest-sidebar {
  flex: 1 1 100%;
  max-width: 100%;
  position: static;
  padding-top: 0;
  max-height: none;
}

/* --- Building countdown/blocked --- */
.build-countdown {
  font-size: 0.8rem;
  color: #6b5a33;
  margin-top: 0.15rem;
}
.build-blocked {
  font-size: 0.8rem;
  color: #8b2500;
  margin-top: 0.15rem;
}

/* --- Building benefit/unlock --- */
.building-benefit {
  font-size: 0.78rem;
  color: #666;
  margin-top: 0.15rem;
}
.building-unlock {
  font-size: 0.8rem;
  color: #2d5a27;
  font-weight: bold;
  margin-top: 0.15rem;
}
.building-teaser {
  font-size: 0.85rem;
  color: #8a7e6b;
  margin: 0.3rem 0;
  line-height: 1.4;
}

/* --- Message tabs --- */
.msg-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #c8b888;
  margin-bottom: 1rem;
}
.msg-tabs a {
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: #3b2e1a;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.msg-tabs a.active {
  border-bottom-color: #2d5a27;
  font-weight: bold;
}
.msg-tabs a:hover {
  background: #f5f0e0;
}

/* --- Message thread --- */
.msg-thread {
  margin: 1rem 0;
}
.msg-thread-item {
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  border: 1px solid #d4c9a8;
  background: #faf6ed;
}
.msg-thread-own {
  border-left: 3px solid #2d5a27;
}
.msg-thread-other {
  border-left: 3px solid #8b7355;
}
.msg-thread-meta {
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 0.4rem;
}
.msg-thread-body {
  font-size: 0.9rem;
}

/* --- Message reply form --- */
.msg-reply-form {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #d4c9a8;
}
.msg-reply-form h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

/* --- Language Switcher --- */
.lang-switcher {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  font-size: 1.2rem;
}
.lang-switcher .lang-active {
  opacity: 1;
  cursor: default;
}
.lang-switcher .lang-link {
  opacity: 0.5;
  text-decoration: none;
  transition: opacity 0.2s;
}
.lang-switcher .lang-link:hover {
  opacity: 1;
}

/* Nav bar language switcher sizing */
.nav-right .lang-switcher {
  font-size: 1rem;
}

/* Landing page language switcher positioning */
.landing-header {
  position: relative;
}
.landing-header .lang-switcher {
  position: absolute;
  top: 0;
  right: 0;
}

/* --- Language Picker (v0.55.0 i18n Welle 0) ---
   Light-theme dropdown for v1 layout + landing header. Trigger is a globe
   + active-flag + caret button; menu opens below with one row per locale.
   Markup mirrors the v2 picker so a single toggle script can drive both. */
.kf-lp-light {
  position: relative;
  display: inline-block;
  font-size: 0.85rem;
}
.kf-lp-light-trigger {
  background: #f5f0e1;
  border: 1px solid #c4b28a;
  color: #3b2e1a;
  padding: 0.25rem 0.55rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  border-radius: 3px;
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1.2;
}
.kf-lp-light-trigger:hover {
  background: #efe7d0;
  border-color: #6b5d4e;
}
.kf-lp-light-globe { font-size: 0.95rem; line-height: 1; opacity: 0.85; }
.kf-lp-light-active-flag { font-size: 1rem; line-height: 1; }
.kf-lp-light-caret { color: #6b5d4e; font-size: 0.7rem; }

.kf-lp-light-menu {
  position: absolute;
  top: calc(100% + 2px);
  right: 0;
  min-width: 180px;
  background: #f5f0e1;
  border: 1px solid #6b5d4e;
  color: #3b2e1a;
  z-index: 50;
  box-shadow: 0 2px 6px rgba(59, 46, 26, 0.18);
}
.kf-lp-light-menu[hidden] { display: none; }
.kf-lp-light-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kf-lp-light-list li {
  padding: 0.45rem 0.7rem;
  display: grid;
  grid-template-columns: 14px 18px 1fr;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.85rem;
  border-bottom: 1px solid #e5dbb8;
}
.kf-lp-light-list li:last-child { border-bottom: none; }
.kf-lp-light-list li:hover { background: #efe7d0; }
.kf-lp-light-list li a {
  display: contents;
  color: inherit;
  text-decoration: none;
}
.kf-lp-light-list li.kf-lp-light-current {
  background: #e6dfc4;
  font-weight: bold;
}
.kf-lp-light-mark {
  color: #6b5d4e;
  font-weight: bold;
  text-align: center;
  line-height: 1;
}
.kf-lp-light-flag { font-size: 1rem; line-height: 1; }
.kf-lp-light-name { color: inherit; }

/* Nav-right + landing-header positioning helpers */
.nav-right .kf-lp-light { font-size: 0.85rem; }
.landing-header .kf-lp-light {
  position: absolute;
  top: 0;
  right: 0;
}

@media (max-width: 540px) {
  .kf-lp-light-trigger { padding: 0.2rem 0.4rem; }
  .kf-lp-light-name { display: none; }
  .kf-lp-light-list li { grid-template-columns: 14px 18px 1fr; }
}

/* --- Legal Page Language Toggle --- */
.legal-lang-toggle {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.legal-lang-toggle button {
  padding: 0.3rem 0.8rem;
  border: 1px solid #c4b28a;
  background: #f5f0e1;
  color: #4a3f35;
  cursor: pointer;
  border-radius: 3px;
  font-size: 0.85rem;
}
.legal-lang-toggle button.active {
  background: #4a3f35;
  color: #f5f0e1;
  border-color: #4a3f35;
}
.legal-lang-toggle button:hover:not(.active) {
  background: #e8dcc8;
}

/* Legal disclaimer for courtesy translation */
.legal-disclaimer {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 4px;
  padding: 0.75rem;
  margin-bottom: 1.5rem;
  font-style: italic;
  color: #856404;
  font-size: 0.9rem;
}

/* --- Settings Language Select --- */
.settings-language-select {
  padding: 0.4rem;
  border: 1px solid #c4b28a;
  border-radius: 3px;
  background: #fff;
  font-size: 0.95rem;
}

/* --- Newbie protection banner (BUG-127) --- */
.newbie-banner {
  background: #d4edda;
  border-bottom: 2px solid #28a745;
  color: #155724;
  padding: 6px 12px;
  font-size: 0.85rem;
  text-align: center;
}

/* --- Streak broken banner --- */
.streak-broken-banner {
  background: #4a1a1a;
  color: #ffcc00;
  padding: 8px 12px;
  text-align: center;
  border-bottom: 1px solid #8b0000;
  font-size: 13px;
}

/* --- Streak profile section --- */
.streak-section {
  background: #f5ecd0;
  border: 1px solid #c4b28a;
  padding: 12px;
  margin: 12px 0;
}
.streak-section h3 { color: #3b2e1a; margin: 0 0 8px; }
.streak-stat { display: inline-block; margin-right: 20px; }
.streak-stat .value { font-size: 18px; font-weight: bold; color: #8B4513; }
.streak-badge { display: inline-block; background: #fff3cd; border: 1px solid #c4b28a; padding: 2px 8px; margin: 2px; font-size: 12px; }

/* --- Lore fragments --- */
.lore-fragment { border: 1px solid #c4b28a; padding: 12px; margin: 8px 0; background: #faf8f0; }
.lore-fragment.locked { opacity: 0.5; border-style: dashed; }
.lore-fragment h3 { margin: 0 0 8px; }
.lore-fragment .lore-body { font-style: italic; color: #555; }
.lore-fragment .lore-date { font-size: 11px; color: #888; margin-top: 4px; }

/* --- Quest path reward --- */
.path-reward-banner {
  background: #e8f5e9;
  border: 1px solid #4caf50;
  padding: 8px 12px;
  margin: 8px 0;
  text-align: center;
}

/* --- Repeatable badge --- */
.quest-repeatable-badge {
  display: inline-block;
  background: #e8eaf6;
  color: #3f51b5;
  padding: 1px 6px;
  font-size: 11px;
  border-radius: 3px;
}

/* --- Streak milestones on quest page --- */
.streak-milestones { margin: 16px 0; }
.streak-milestone-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-bottom: 1px solid #e0d8c0;
}
.streak-milestone-row.reached { background: #e8f5e9; }
.streak-milestone-row.locked { opacity: 0.6; }

/* --- Alliance MOTD --- */
.motd-alliance { background: #e8f4f8; border-bottom-color: #4a9aba; }

/* --- Alliance Chat Inline --- */
/* FEED-232: mobile overflow — long/unbreakable text in chat messages forced
   horizontal scrolling on narrow viewports. Box is now fully width-bounded
   and long strings wrap via overflow-wrap: anywhere. */
.alliance-chat-inline { max-height: 400px; overflow-y: auto; overflow-x: hidden; max-width: 100%; box-sizing: border-box; border: 1px solid #ddd; padding: 0.5rem; margin-bottom: 1rem; }
.alliance-chat-inline .chat-message { padding: 0.25rem 0; border-bottom: 1px solid #f0f0f0; word-break: break-word; overflow-wrap: anywhere; }
.alliance-chat-inline .chat-message:last-child { border-bottom: none; }
.alliance-chat-inline .chat-unread-marker { text-align: center; color: #c44; font-weight: bold; padding: 0.5rem 0; border-bottom: 2px solid #c44; margin: 0.25rem 0; font-size: 0.85rem; }
.alliance-chat-inline .chat-rank-badge { font-size: 0.7rem; background: #eee; padding: 1px 4px; border-radius: 3px; margin-right: 0.25rem; }
.alliance-chat-inline .chat-system { color: #999; font-style: italic; }
.alliance-chat-inline .chat-unread { background: #fffbe6; }

/* --- Alliance Hall Quick Links --- */
.alliance-quick-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.alliance-quick-links .btn { display: flex; align-items: center; gap: 0.25rem; }

/* --- Alliance Buff --- */
.buff-category-card { border: 1px solid #ddd; padding: 0.75rem; margin-bottom: 0.5rem; border-radius: 4px; }
.buff-category-card.active { border-color: #4a9; background: #f0faf4; }
.buff-category-card label { cursor: pointer; display: flex; align-items: center; gap: 0.5rem; }

/* --- Lore Quote --- */
.lore-quote { font-style: italic; color: #7a6652; border-left: 3px solid #c9a96e; padding-left: 0.75rem; margin: 1rem 0; }

/* --- Treasury Balance --- */
.treasury-balance { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 1rem 0; }
.treasury-balance-item { text-align: center; }
.treasury-balance-amount { font-size: 1.4rem; font-weight: bold; }

/* --- Treasury Audit Log --- */
.treasury-log-deposit { color: #2a7; }
.treasury-log-withdraw { color: #c44; }
.treasury-log-sink { color: #48c; }

/* ==========================================================================
   Handbook — Retro Wiki Styles
   ========================================================================== */

/* Layout override for handbook */
.handbook-page .container {
  max-width: 1200px;
  padding: 0;
}

.hb-layout {
  display: flex;
  gap: 0;
  min-height: 60vh;
}

/* Sidebar */
/* BUG-700: explicit 'display: flex; flex-direction: column;' overrides the
   global 'nav, .nav { display: flex; flex-wrap: wrap; justify-content:
   space-between; }' rule that would otherwise lay sidebar links out
   side-by-side. The '.hb-sidebar a { display: block; }' child rule alone is
   insufficient inside a flex parent — the parent's flex axis still governs
   layout. Setting flex-direction here forces every link onto its own row. */
.hb-sidebar {
  display: flex;
  flex-direction: column;
  width: 220px;
  min-width: 220px;
  background: #ebe6d6;
  border-right: 2px solid #8b7355;
  padding: 1rem 0;
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: clip;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.85rem;
}

.hb-sidebar-title {
  padding: 0 0.75rem 0.5rem;
  font-weight: bold;
  color: #3b2e1a;
  border-bottom: 1px solid #8b7355;
  margin-bottom: 0.5rem;
}

.hb-sidebar a {
  display: block;
  padding: 0.3rem 0.75rem;
  color: #3b2e1a;
  text-decoration: none;
  border-left: 3px solid transparent;
}

.hb-sidebar a:hover {
  background: #ddd6c1;
}

.hb-sidebar a.hb-sidebar--active {
  border-left-color: #8b7355;
  background: #ddd6c1;
  font-weight: bold;
}

.hb-sidebar .hb-badge-new {
  display: inline-block;
  font-size: 0.65rem;
  background: #c9a959;
  color: #3b2e1a;
  padding: 0 0.3rem;
  border-radius: 2px;
  margin-left: 0.3rem;
  vertical-align: middle;
  font-family: Verdana, sans-serif;
}

/* Content area */
.hb-content {
  flex: 1;
  padding: 1.5rem 2rem;
  min-width: 0;
  font-family: 'Courier New', Courier, monospace;
  line-height: 1.7;
  color: #2c2416;
}

.hb-content h1 {
  font-size: 1.6rem;
  color: #3b2e1a;
  border-bottom: 2px solid #8b7355;
  padding-bottom: 0.3rem;
  margin-bottom: 1rem;
}

.hb-content h2 {
  font-size: 1.2rem;
  color: #3b2e1a;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #c9a959;
  padding-bottom: 0.2rem;
}

.hb-content h3 {
  font-size: 1rem;
  color: #5a4a32;
  margin-top: 1.5rem;
  margin-bottom: 0.3rem;
}

.hb-content p {
  margin: 0.7rem 0;
  max-width: 65ch;
}

.hb-content blockquote {
  border-left: 3px solid #c9a959;
  padding: 0.5rem 1rem;
  margin: 1rem 0;
  background: #f0ead4;
  font-style: italic;
  color: #5a4a32;
}

.hb-content ul {
  padding-left: 1.5rem;
  margin: 0.5rem 0;
}

.hb-content li {
  margin: 0.2rem 0;
}

.hb-content code {
  background: #ebe6d6;
  padding: 0.1rem 0.3rem;
  font-size: 0.9em;
}

.hb-content hr.hb-separator {
  border: none;
  border-top: 1px solid #c9a959;
  margin: 1.5rem 0;
}

.hb-content hr.hb-separator--ornate {
  border: none;
  text-align: center;
  margin: 2rem 0;
  overflow: visible;
  height: 1.2em;
}

.hb-content hr.hb-separator--ornate::after {
  content: '═════════════════════════════';
  color: #c9a959;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
}

/* Anchor links */
.hb-anchor {
  color: #c9a959;
  text-decoration: none;
  font-size: 0.75em;
  opacity: 0;
  margin-left: 0.3rem;
  transition: opacity 0.2s;
}

.hb-content h2:hover .hb-anchor,
.hb-content h3:hover .hb-anchor {
  opacity: 0.7;
}

.hb-anchor:hover { opacity: 1 !important; }

.hb-anchor--copied::after {
  content: ' ✓';
  color: #5a8a3a;
}

/* Mini-TOC (right sidebar, desktop only) */
.hb-minitoc {
  display: none;
}

@media (min-width: 1200px) {
  .hb-minitoc {
    display: block;
    width: 180px;
    min-width: 180px;
    padding: 1rem 0.5rem;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: clip;
    font-size: 0.75rem;
    font-family: Verdana, sans-serif;
    border-left: 1px solid #ddd6c1;
  }

  .hb-minitoc-title {
    font-weight: bold;
    color: #5a4a32;
    margin-bottom: 0.5rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .hb-minitoc a {
    display: block;
    padding: 0.15rem 0;
    color: #8b7355;
    text-decoration: none;
    line-height: 1.4;
  }

  .hb-minitoc a.hb-minitoc-h3 {
    padding-left: 0.75rem;
  }

  .hb-minitoc a:hover,
  .hb-minitoc a.hb-minitoc--active {
    color: #3b2e1a;
  }
}

/* Prev/Next navigation */
.hb-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #c9a959;
  font-family: Verdana, sans-serif;
  font-size: 0.85rem;
}

.hb-nav a {
  color: #3b2e1a;
  text-decoration: none;
}

.hb-nav a:hover { text-decoration: underline; }

/* Version footer */
.hb-version {
  margin-top: 2rem;
  padding-top: 0.5rem;
  border-top: 1px dashed #c9a959;
  font-size: 0.75rem;
  color: #8b7355;
  font-family: Verdana, sans-serif;
}

/* Mobile hamburger */
.hb-menu-toggle {
  display: none;
  background: #3b2e1a;
  color: #f5f0e1;
  border: 1px solid #8b7355;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  font-size: 1rem;
  margin: 0.5rem;
}

@media (max-width: 768px) {
  .hb-menu-toggle { display: block; }
  .hb-sidebar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    height: 100vh;
    width: 260px;
    box-shadow: 2px 0 8px rgba(0,0,0,0.3);
  }
  .hb-sidebar--open { display: block; }
  .hb-content { padding: 1rem; }
}

/* Index page */
.hb-index-list {
  list-style: none;
  padding: 0;
}

.hb-chapter-item {
  padding: 0.6rem 0;
  border-bottom: 1px solid #ddd6c1;
}

.hb-chapter-item a {
  color: #3b2e1a;
  text-decoration: none;
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
}

.hb-chapter-item a:hover { text-decoration: underline; }

.hb-chapter-num {
  display: inline-block;
  width: 2rem;
  color: #8b7355;
  font-weight: bold;
}

/* Search */
.hb-search-input {
  width: 100%;
  max-width: 400px;
  padding: 0.4rem 0.6rem;
  border: 1px solid #8b7355;
  background: #f5f0e1;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.hb-search-input:focus {
  outline: 2px solid #c9a959;
}

/* Updated mark */
mark.handbook-updated {
  background: rgba(201, 169, 89, 0.15);
  padding: 0.1rem 0.2rem;
  border-radius: 2px;
}

/* --- Treasure Hunt (S.2) --- */
:root {
  --rarity-common:    #7a8a6a;
  --rarity-rare:      #2f5d8f;
  --rarity-epic:      #6b2d5c;
  --rarity-legendary: #b8860b;
}

.treasure-page .container { max-width: 900px; }

.treasure-heading {
  font-family: 'Courier New', monospace;
  color: #3b2e1a;
  border-bottom: 1px solid #8b7355;
  padding-bottom: 0.3rem;
  margin-bottom: 0.6rem;
}

.treasure-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 2px solid #8b7355;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.treasure-tab {
  padding: 0.4rem 0.9rem;
  border: 1px solid #8b7355;
  border-bottom: none;
  background: #e9dfc7;
  color: #3b2e1a;
  text-decoration: none;
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
}
.treasure-tab--active {
  background: #f0e6d2;
  font-weight: bold;
  position: relative;
  top: 1px;
}

.treasure-sheet {
  background: #f0e6d2;
  border: 2px solid #8b7355;
  padding: 1rem 1.2rem;
  box-shadow: 2px 3px 0 rgba(139, 115, 85, 0.25), -1px 2px 0 rgba(139, 115, 85, 0.18);
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

.treasure-rarity-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
}
.treasure-rarity-tab {
  padding: 0.25rem 0.6rem;
  border: 1px solid #8b7355;
  background: #f5efd8;
  color: #3b2e1a;
  text-decoration: none;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
}
.treasure-rarity-tab--active {
  font-weight: bold;
  border-width: 2px;
  background: #fff;
}

.treasure-progress {
  font-style: italic;
  color: #5c4820;
  margin: 0.5rem 0 0.9rem;
}

.treasure-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}
@media (max-width: 500px) {
  .treasure-grid { grid-template-columns: repeat(2, 1fr); }
}

.treasure-slot {
  border: 2px solid #8b7355;
  padding: 0.7rem 0.6rem;
  min-height: 5.5rem;
  background: #faf3df;
  box-shadow: 1px 1px 0 rgba(139, 115, 85, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-size: 0.88rem;
}
.treasure-slot--owned strong { display: block; color: #3b2e1a; margin-bottom: 0.25rem; }
.treasure-lore { font-style: italic; color: #5c4820; font-family: 'Courier New', monospace; font-size: 0.8rem; }
.treasure-slot--missing {
  background: #e6dcbf;
  color: #8b7355;
  border-style: dashed;
}
.treasure-slot-placeholder { font-size: 1.4rem; letter-spacing: 0.2em; }

.treasure-unseal {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: #c9a959;
  color: #3b2e1a;
  border: 2px solid #8b7355;
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  cursor: not-allowed;
  opacity: 0.7;
}
.treasure-unseal[disabled] { cursor: not-allowed; }
.treasure-unseal-note {
  margin-left: 0.6rem;
  font-style: italic;
  color: #5c4820;
  font-size: 0.85rem;
}

.treasure-quote {
  border-left: 3px solid #8b7355;
  padding: 0.5rem 0.8rem;
  margin: 0.8rem 0;
  font-style: italic;
  color: #3b2e1a;
  background: #f5efd8;
}

.treasure-hall-empty { color: #8b7355; font-style: italic; }
.treasure-coming-soon { color: #5c4820; font-style: italic; }

/* --- Treasure S.5 — Legendary finder badge + Hall of Finders --- */
.profile-header--legendary {
  border: 2px solid var(--rarity-legendary);
  background: linear-gradient(180deg, #fff9e8 0%, #faf0c8 100%);
  padding: 0.6rem 0.8rem;
  border-radius: 4px;
  box-shadow: 1px 2px 0 rgba(184, 134, 11, 0.35);
}
.legendary-finder-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.15rem 0.5rem;
  background: var(--rarity-legendary);
  color: #fff8dc;
  font-size: 0.75rem;
  font-family: 'Courier New', monospace;
  border-radius: 3px;
  vertical-align: middle;
  cursor: help;
}
.treasure-hall-list {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0;
}
.treasure-hall-entry {
  padding: 0.35rem 0;
  border-bottom: 1px dashed #c9a959;
  font-size: 0.95rem;
}
.treasure-hall-entry:last-child { border-bottom: none; }
.treasure-hall-entry time { color: #5c4820; font-family: 'Courier New', monospace; margin-right: 0.5rem; }
.treasure-hall-entry .treasure-hall-name { font-weight: bold; }
.treasure-hall-entry--deleted .treasure-hall-name { color: #8b7355; font-style: italic; }
.treasure-hall-entry .treasure-hall-alliance { color: #5c4820; margin-left: 0.3rem; }

/* --- Vacation Mode (v0.19.0) --- */
.vacation-status-banner {
  background: #e8f0e0;
  border: 1px solid #6b8a4a;
  padding: 0.5rem 0.75rem;
  margin: 0.5rem 0;
}
.vacation-status-banner .vacation-anchor {
  font-size: 1.4em;
  margin-right: 0.4rem;
}
.vacation-form {
  background: #faf6e8;
  border: 1px solid #c8b880;
  padding: 0.75rem;
  margin: 0.5rem 0;
}
.vacation-budget-bar {
  display: block;
  background: #ddd5c0;
  height: 0.5rem;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 0.25rem;
}
.vacation-budget-bar > .fill {
  display: block;
  background: #6b8a4a;
  height: 100%;
}
.vacation-blocker-list {
  color: #8b1a1a;
  margin: 0.4rem 0;
  padding-left: 1.2rem;
  font-size: 0.9rem;
}
.vacation-rules {
  font-size: 0.85rem;
  color: #5a4a30;
}
.vacation-rules li { margin: 0.15rem 0; }
.map-symbol-vacation {
  position: absolute;
  font-size: 0.8em;
  pointer-events: none;
  color: #2d4d6b;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff;
}
/* v0.65.7 BUG-631 hotfix — replaced the .map-symbol-korsaren-fortress glyph
   approach with the .map-cell-korsaren-fortress black cell fill above. The
   emoji glyph rendered unreliably on mobile / Linux devices; a solid colour
   fill is font-independent. */

/* --- Strength summary (military / harbour pages) --- */
.strength-summary { background: #f5f0e1; border: 1px solid #d4c7a8; padding: 0.6rem 0.9rem; margin-bottom: 1rem; border-radius: 3px; }
.strength-summary h2 { margin: 0 0 0.4rem 0; font-size: 1rem; border-bottom: 1px solid #c4b489; padding-bottom: 0.25rem; }
.strength-table { width: 100%; border: none; background: transparent; }
.strength-table th { text-align: left; padding: 0.25rem 0.5rem; font-weight: normal; color: #6b5d4e; background: transparent; border: none; }
.strength-table td { padding: 0.25rem 0.5rem; border: none; }
.strength-breakdown { color: #7a6a55; font-size: 0.8rem; margin-left: 0.4rem; }

/* --- Submit-in-flight feedback (data-disable-on-submit) --- */
.btn-submitting { opacity: 0.6; cursor: wait; }