:root{
  --bg:#f5f7fb; 
  --accent:#2b6cb0; 
  --accent-dark:#1e5a9e;
  --muted:#666; 
  --card:#ffffff; 
  --soft:#eef4fb; 
  --danger:#e53e3e;
  --header-gradient: linear-gradient(135deg, #334e68 0%, #2b6cb0 50%, #3182ce 100%);
}

body{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, Arial, sans-serif; 
  background: linear-gradient(180deg, #f5f7fb 0%, #e9eef5 100%);
  color:#111; 
  margin:0;
  min-height: 100vh;
}

/* Modern Header */
header{
  background: var(--header-gradient);
  color: white; 
  padding: 2rem 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
}

header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 40%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  pointer-events: none;
}

header h1 {
  margin: 0 0 0.5rem 0;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
}

header p {
  margin: 0;
  opacity: 0.9;
  font-size: 1rem;
  font-weight: 400;
  position: relative;
}

main{
  padding: 2rem 1.5rem; 
  max-width: 1400px; 
  margin: 0 auto;
}

/* Modern Typography */
h1, h2, h3, h4, h5, h6 {
  color: #1a202c;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.3;
}

h2 {
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
  margin-top: 2rem;
}

h3 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

h4 {
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
}
/* Modern Tables */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  box-shadow: 0 2px 12px rgba(16, 24, 40, 0.06);
  border-radius: 12px;
  overflow: hidden;
}

th,
td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid #eef6fc;
  text-align: left;
}

thead {
  background: linear-gradient(180deg, var(--soft), #fafbfc);
}

thead th {
  font-weight: 700;
  color: #334155;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
#controls {
  margin-bottom: 2rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  background: white;
  padding: 1.25rem;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(11, 20, 40, 0.08);
}

/* Ensure controls use button styles and file input label is visible */
#controls .btn,
#controls .btn-ghost {
  padding: 0.75rem 1.25rem;
  font-size: 0.95rem;
}

#controls .fileLabel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 12px;
  border: 1px solid rgba(16, 24, 40, 0.1);
  padding: 0.75rem 1rem;
  background: white;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
  font-weight: 600;
}

#controls .fileLabel:hover {
  background: rgba(11, 20, 40, 0.04);
  border-color: rgba(16, 24, 40, 0.15);
}

#controls .fileLabel input[type="file"] {
  display: inline-block;
}

/* Force readable button text specifically in the controls bar */
#controls .btn {
  background: var(--accent);
  color: #fff;
  border: none;
}

#controls .btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

#controls .btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid rgba(11, 20, 40, 0.1);
}

#roundControls {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-left: auto;
}

.roundLabel {
  font-weight: 600;
  font-size: 1.05rem;
  color: #1a202c;
  padding: 0.5rem 0.75rem;
  background: var(--soft);
  border-radius: 10px;
}
/* Section styling */
#continentList {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.continentItem {
  background: var(--card);
  padding: 0.5rem 0.875rem;
  border-radius: 10px;
  border: 1px solid #e6edf5;
  transition: all 0.2s ease;
  box-shadow: 0 1px 4px rgba(11, 20, 40, 0.04);
}

.continentItem:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(43, 108, 176, 0.15);
}

.nationBox {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  border: 1px solid #e0e7ef;
  margin-right: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
}

#incomeResults {
  margin-top: 1rem;
  background: var(--card);
  padding: 1.25rem;
  border-radius: 12px;
  border: 1px solid #e6edf5;
  box-shadow: 0 2px 8px rgba(11, 20, 40, 0.06);
}

footer {
  padding: 2rem 1.5rem;
  font-size: 0.875rem;
  color: var(--muted);
  text-align: center;
}

/* Modern Technology section */
#technology {
  margin-top: 2rem;
}

#techList {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

#techList .chartGroup {
  margin-bottom: 1.25rem;
  border-radius: 12px;
  border: 1px solid #e6edf5;
  background: var(--card);
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(11, 20, 40, 0.06);
  transition: all 0.2s ease;
}

#techList .chartGroup:hover {
  box-shadow: 0 4px 12px rgba(11, 20, 40, 0.1);
}

#techList .chartHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--soft);
}

#techList .chartHeader h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a202c;
}

#techList .chartContent {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.875rem;
}

#techList .techItem {
  background: var(--soft);
  border: 1px solid rgba(16, 24, 40, 0.06);
  padding: 0.875rem;
  border-radius: 10px;
  transition: all 0.2s ease;
}

#techList .techItem:hover {
  border-color: var(--accent);
  background: white;
  box-shadow: 0 2px 8px rgba(43, 108, 176, 0.1);
}

#techList .chartContent.collapsed {
  display: none;
}

#techList .techItem h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: #2d3748;
}

#techList .techItem .techDesc {
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

#techList .techItem .techControls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.techNationList {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.techNationList label {
  background: white;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  border: 1px solid #e6edf5;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
}

.techNationList label:hover {
  border-color: var(--accent);
  background: var(--soft);
}

@media (max-width: 720px) {
  #techList {
    grid-template-columns: 1fr;
  }
}

.hidden{display:none}

/* Ensure panel-hidden state overrides #nationPanel's ID rule (ID selector is more specific).
  This guarantees that adding the .hidden class truly hides the panel even though
  #nationPanel sets display:flex. Use !important to be robust against ordering. */
#nationPanel.hidden{ display: none !important }
body.nation-open #nationPanel.hidden{ display: none !important }

/* Modern nation cards grid */
#nationControls {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.nationCardModern {
  background: #fff;
  border-radius: 16px;
  border-left: 6px solid transparent;
  padding: 1.25rem;
  box-shadow: 0 4px 12px rgba(11, 20, 40, 0.08);
  position: relative;
  transition: all 0.3s ease;
}

.nationCardModern:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(11, 20, 40, 0.15);
}

.nationCardModern .cardNumber {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #718096, #4a5568);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.nationCardModern .cardContent {
  margin-top: 0.25rem;
}

.nationCardModern .cardTitle {
  margin: 0 0 1rem 0;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.nationCardModern .cardTitle .completionCheck {
  color: #16a34a;
  font-size: 1.4rem;
  margin-left: 0.5rem;
  font-weight: 700;
}

.nationCardModern .cardStat {
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 0.6rem;
  line-height: 1.5;
}

.nationCardModern .cardStat strong {
  color: #111;
  font-weight: 600;
}

.nationCardModern .cardBtn {
  width: 100%;
  margin-top: 1rem;
  padding: 0.75rem;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(43, 108, 176, 0.25);
}

.nationCardModern .cardBtn:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(43, 108, 176, 0.35);
}

@media (max-width: 720px) {
  #nationControls {
    grid-template-columns: 1fr;
  }
}

#nationList{display:flex;flex-wrap:wrap;gap:.75rem}
.nationCard{background:linear-gradient(180deg,#fff,#fbfdff);padding:.75rem 1rem;border-radius:10px;cursor:pointer;min-width:150px;flex:0 0 auto;box-shadow:0 6px 18px rgba(11,20,40,0.04);display:flex;align-items:center;gap:.75rem;border-left:8px solid transparent}
.nationCard:hover{transform:translateY(-3px);transition:all .18s ease-out}
.nationCard strong{font-size:1rem}
.nationDot{width:14px;height:14px;border-radius:50%;display:inline-block;margin-right:.5rem;box-shadow:0 1px 2px rgba(11,20,40,0.08)}
#nationPanel{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width: min(1000px, 96%);
  max-width:1000px;
  max-height:90vh;
  overflow:auto;
  background:var(--card);
  border:1px solid #e6eef8;
  padding:1.25rem;
  box-shadow:0 18px 48px rgba(11,20,40,0.12);
  border-radius:12px;
  z-index:1000;
  /* make panel a flex column so inner grid can stretch to available height */
  display:flex;
  flex-direction:column;
}
#nationPanel button{margin-bottom:.5rem}

/* Small screens: make sure modal doesn't overflow and is comfortably sized */
@media (max-width:520px){
  #nationPanel{ width:92%; padding:.75rem; left:50%; top:48%; transform:translate(-50%,-48%); }
}

/* Full-page nation view mode */
/* Force-hide main chrome and prevent scrolling while nation page is open */
body.nation-open{ overflow:hidden !important }
body.nation-open #appMain{ display:none !important }
body.nation-open header{ display:none !important }
body.nation-open footer{ display:none !important }

/* Ensure nation panel absolutely covers the viewport and sits above everything */
body.nation-open #nationPanel{ position:fixed !important; left:0 !important; top:0 !important; right:0 !important; bottom:0 !important; width:100vw !important; height:100vh !important; inset:0 !important; transform:none !important; max-width:100% !important; max-height:100% !important; border-radius:0 !important; padding:1rem 1.25rem !important; box-shadow:none !important; overflow:auto !important; z-index:2147483647 !important; background: var(--card) !important }

/* Make sure purchaseSection stays in the normal document flow (not absolutely positioned) and sits below the grid */
body.nation-open #nationPanel .purchaseSection{ position:relative !important; z-index:1 !important }

/* Debug outlines to visualize layout during QA. Remove or uncomment the example below if needed. */
/* .nationPanelLeft, .nationPanelRight, .purchaseSection{ outline: 1px dashed rgba(43,108,176,0.12) } */
.nationPanelLeft, .nationPanelRight, .purchaseSection{ outline: none }

/* Nation panel header / breadcrumb */
.nationPanelHeader{ display:flex; gap:1rem; align-items:center; margin-bottom:1rem }
.nationPanelHeader .nationBreadcrumb{ font-weight:700; color:var(--muted) }

/* Larger header/title for nation page */
.nationPanelHeader .nationBreadcrumb{ font-size:1.1rem }
.nationPanelHeader .nationTitle{ font-size:1.4rem; font-weight:800; margin-left:.5rem }

/* Two-column layout for nation page
   Note: #nationPanel visibility is controlled via the `.hidden` class and `body.nation-open` overrides.
*/
#nationPanel .panelColumns{ display:grid; grid-template-columns: 320px 1fr; gap:1rem }
#nationPanel .panelLeft{ background:var(--card); padding:1rem; border-radius:8px }
#nationPanel .panelRight{ background:var(--card); padding:1rem; border-radius:8px }
@media (max-width:920px){
  #nationPanel .panelColumns{ grid-template-columns: 1fr; }
}

/* Slide-in animation when opening nation page */
/* ensure panel transitions only when it becomes visible */
#nationPanel{ transform: translateX(0); transition: transform 300ms ease, opacity 200ms ease }
body.nation-open #nationPanel{ animation: slideIn 320ms ease forwards }
@keyframes slideIn{ from{ transform: translateX(20px); opacity:0 } to{ transform: translateX(0); opacity:1 } }
@keyframes slideOut{ from{ transform: translateX(0); opacity:1 } to{ transform: translateX(20px); opacity:0 } }

/* apply slideOut when panel has .closing */
body.nation-open #nationPanel.closing{ animation: slideOut 240ms ease forwards }

/* Turn sequence optional steps styling */
#turnSequence .optionalStep{ color:var(--muted); font-style:italic }
#turnSequence .optionalStep em{ font-size:0.85rem; color:#999; margin-left:.4rem }
#turnSequence .techRequired{ display:none }

/* Two-column layout for nation panel: use two equal responsive columns */
.nationPanelGrid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:1.5rem; margin-top:1rem; max-width:1400px; align-items:stretch; grid-auto-rows: auto; }
/* If purchaseSection is placed inside the grid, ensure it spans both columns to avoid overlapping the two-column content */
.nationPanelGrid > .purchaseSection{ grid-column: 1 / -1 }
@media (max-width:1024px){ .nationPanelGrid{ grid-template-columns: 1fr; } }

/* Left column summary sections */
.nationPanelLeft{ display:flex; flex-direction:column; gap:1rem; }
.summarySection{ background:#ffffff; border-radius:12px; overflow:hidden; border:1px solid #e5e7eb; box-shadow:0 1px 2px rgba(0,0,0,0.02); display:flex; flex-direction:column; }
.summaryTitle{ background:#f8fafc; margin:0; padding:.75rem 1rem; font-size:1rem; font-weight:600; border-bottom:1px solid #e5e7eb; display:flex; align-items:center; gap:.5rem }
.summaryCard{ padding:1rem; display:flex; flex-direction:column; gap:.75rem; }

.summaryRow{ display:flex; gap:.75rem; align-items:flex-start; padding:.5rem 0; border-bottom:1px solid #f1f5f9 }
.summaryRow:last-child{ border-bottom:none }
.summaryRowIcon{ font-size:1.25rem; width:32px; flex-shrink:0; text-align:center }
.summaryRowContent{ flex:1; display:flex; flex-direction:column; gap:.25rem }
.summaryRowLabel{ font-size:.875rem; font-weight:600; color:#475569 }
.summaryRowValue{ font-size:1rem; font-weight:700; color:#1e293b; display:flex; align-items:center; gap:.5rem }
.summaryInlineValue{ font-weight:700; color:#10b981 }
.summarySubtext{ font-size:.75rem; color:#94a3b8; font-weight:400 }
.summaryObjectivesBlock{ margin-top:.4rem }
.summaryObjectivesInline{ display:inline-flex; align-items:center; gap:0.4rem; font-size:0.95rem }
/* Inline label used for Territories/Technologies objective counts */
.summaryInlineLabel{ display:inline-flex; align-items:center; gap:0.4rem; font-size:0.95rem }
/* Territories details */
.summaryTerritoriesHeader{ display:flex; align-items:center; gap:0.5rem }
.summaryTerritoriesDetails{ margin-top:0.5rem }
.territoryItem{ display:inline-block; margin:2px 6px; padding:2px 6px; border-radius:6px; font-size:0.85rem }
.territory-original{ color:#374151; opacity:0.7 }
.territory-captured{ color:#0f172a; font-weight:700 }
.territory-capital{ color:#b91c1c; font-weight:700 }
.summaryObjectiveBonus{ display:none }
/* Visual divider specifically for the Objectives row: place a thin rule above it */
.objectivesRow{ padding-top:0.6rem; margin-top:0.25rem; border-top:1px solid #e6edf5 }
.summarySubRow{ font-size:.8rem; color:#64748b; padding-left:.5rem; margin-top:.15rem }
.summaryNationalObjectives{ margin-top:.25rem; padding:.5rem; background:#f8fafc; border-radius:6px }
.summaryBonus{ color:#10b981; font-weight:600; margin-left:.25rem }
.summaryTransferred,.summaryRemaining,.summaryCollect,.summaryToUse{ font-size:.85rem; margin-top:.25rem; padding-left:.5rem }

/* War Bonds summary row */
.summaryWarBondsRow{
  margin-top:6px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.85rem;
  padding-left:0.5rem;
}
.summaryWarBondsRow label{ font-weight:600; font-size:0.85rem }
#summaryWarBondsInput{ width:4ch }
.summaryWarBondsNote{ color:#444; font-size:0.8rem }

/* Convoy payment row (similar to war bonds) */
.summaryConvoyRow{ display:none; margin-left:8px; align-items:center; gap:8px; }
#summaryConvoyInput{ width:5ch }
.summaryConvoyNote{ color:#444; font-size:0.8rem }
.summaryHighlight{ font-weight:700 }
.summaryHighlight.orange{ color:#f59e0b }
.summaryHighlight.green{ color:#10b981 }
.summaryHighlight.bold{ color:#1e293b; font-size:.95rem }
.summaryInput{ width:60px; padding:.15rem .35rem; border:1px solid #cbd5e1; border-radius:4px; font-size:.8rem }
.btn-icon{ background:transparent; border:none; cursor:pointer; font-size:1rem; padding:.15rem .35rem; opacity:.7; transition:opacity 150ms }
.btn-icon:hover{ opacity:1 }

.summaryLabel{ font-size:.875rem; color:#64748b; margin-bottom:.25rem }
.summaryValue{ font-size:1.125rem; font-weight:600; color:#1e293b }
.summaryList{ font-size:.875rem; color:#475569; line-height:1.6 }
.btn-sm{ padding:.35rem .75rem; font-size:.875rem }

/* Right column: Round phases UI */
.nationPanelRight{ background:#ffffff; border-radius:12px; padding:1.5rem; border:1px solid #e5e7eb; box-shadow:0 1px 3px rgba(0,0,0,0.04); display:flex; flex-direction:column; min-height:0 }
/* Keep turnSequence filling the column area (height determined by the grid row), without forcing the grid to take remaining space */
.nationPanelRight > #turnSequence{ display:flex; flex-direction:column; height:100%; min-height:0 }
.nationPanelRight .turnSteps{ overflow:auto; min-height:0 }
.roundHeader{ margin-bottom:1rem }
.roundTitle{ margin:0; font-size:1.25rem; font-weight:700; color:#1e293b }
.roundProgress{ margin-bottom:1.25rem }
.progressText{ font-size:.875rem; color:#64748b; margin-bottom:.5rem }
.progressBarOuter{ height:12px; background:#e6fffa; border-radius:8px; overflow:hidden; border:1px solid #d1fae5 }
.progressBarInner{ height:100%; background:linear-gradient(90deg,#34d399,#10b981); width:0%; transition:width 300ms ease }
.turnSteps{ list-style:none; padding:0; margin:0; display:grid; gap:.75rem }
.stepRow{ background:#f8fafc; padding:0.75rem 1rem; border-radius:10px; display:flex; align-items:center; gap:0.75rem; border:2px solid #e5e7eb; transition:all 180ms ease; cursor:pointer }
.stepRow:hover{ border-color:#cbd5e1; background:#f1f5f9 }
.stepRow input[type=checkbox]{ width:20px; height:20px; cursor:pointer; accent-color:#10b981; flex-shrink:0 }
.stepRow label{ display:flex; flex-direction:row; gap:.75rem; align-items:center; cursor:pointer; flex:1; margin:0 }
.stepNumber{ font-weight:700; color:#1e293b; font-size:.8rem; width:1.2rem; text-align:right }
.stepTitle{ font-weight:600; color:#1e293b; font-size:.95rem }
.stepSubtitle{ font-size:.85rem; color:#64748b; margin-left:auto }

@media (max-width:720px){
  .stepRow label{ flex-direction:column; align-items:flex-start }
  .stepSubtitle{ margin-left:0 }
}
.stepRow.completed{ background:#e6fffa; border-color:#10b981; box-shadow:0 1px 3px rgba(16,185,129,0.15) }
.stepRow.completed .stepTitle, .stepRow.completed .stepNumber{ color:#059669 }
.stepRow.optionalStep{ opacity:.7 }
.stepRow.optionalStep .stepTitle:after{ content:" (optional)"; font-size:.75rem; color:#94a3b8; font-weight:400 }
.roundActions{ margin-top:1.25rem }
.roundActions .btn{ width:100%; padding:.85rem; font-weight:600; background:#10b981; color:#fff; border:none; font-size:1rem }
.roundActions .btn:hover{ background:#059669 }
.roundActions .btn[disabled]{ opacity:.5; cursor:not-allowed; background:#94a3b8 }
.btn-block{ display:block; width:100% }

/* Hide old summary section */
#nationSummary{ display:none !important }

/* Full-width purchase calculator section under the two columns */
.purchaseSection{ margin-top:1.25rem; background:transparent }
.purchaseSection .purchaseWrapper{ background:var(--card); border-radius:12px; padding:1rem; border:1px solid #e6edf5; box-shadow:0 1px 6px rgba(11,20,40,0.04) }
.purchaseSection .purchaseWrapper .purchaseCalculator{ margin:0 }
.purchaseSection .purchaseWrapper .pcUnits{ /* allow full height, page will scroll instead */ max-height:none; overflow:visible; }
.purchaseSection .purchaseWrapper .pcActions{ margin-top:.75rem }
.pcHeaderRow{ display:flex; justify-content:flex-start; align-items:center; gap:.5rem; margin-bottom:.5rem }
.pcHeaderRow h4{ margin:0 }
.pcHeaderTitle{ margin:0; font-size:1rem; font-weight:600 }

/* Toggle icon/button */
.pcToggle{ display:inline-flex; align-items:center; justify-content:center; gap:.25rem; margin-right:.5rem }
.pcToggleIcon{ transition: transform 220ms ease; transform-origin:50% 50%; }
.purchaseCalculator.collapsed .pcToggleIcon{ transform: rotate(-90deg); }

/* animate collapse/expand: using max-height for simplicity; large max-height avoids computing exact height */
.purchaseCalculator{ overflow:hidden; transition: max-height 260ms ease, opacity 200ms ease; max-height:2000px; opacity:1 }
.purchaseCalculator.collapsed{ max-height:0; opacity:0; }

/* small helper for visually hidden elements */
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

/* unit icon placeholder and focus styles */
.pcUnitHeader .unitIcon{ display:inline-block; width:20px; height:20px; margin-right:.4rem; vertical-align:middle }
.pcUnitCard:focus-within{ outline:2px solid rgba(43,108,176,0.25); }

.pcToggle:focus{ box-shadow:0 0 0 3px rgba(43,108,176,0.12); }

/* Old round UI styles (for reference, can be removed) */

/* Objectives: two-column layout, wrap text within each item; fallback to single column on narrow screens */
/* Objectives: two-column layout, wrap text within each item; fallback to single column on narrow screens */
#objectivesList{ display:grid; grid-template-columns: repeat(2, 1fr); gap:.6rem 1rem; padding-bottom:.5rem }
#objectivesList > div{ display:block; white-space:normal; margin:0; background:var(--soft); padding:.45rem; border-radius:8px }
#objectivesList label{ white-space:normal; display:block }
@media (max-width:720px){
  #objectivesList{ grid-template-columns: 1fr; }
}

/* War state controls inside nation panel */
#nationWarState{ margin-top: .5rem; padding:.5rem; background:var(--soft); border-radius:8px }
#warStateList{ display:flex; flex-wrap:wrap; gap:.4rem }
.warStateItem{ padding:.25rem .5rem; background:var(--muted); border-radius:6px; display:flex; align-items:center; gap:.4rem }
.warStateItem input{ transform:scale(1.05) }

/* Territory table owner color accent */
/* Territory groups by continent */
#territoryGroups .continentGroup{ margin-bottom:1rem; border-radius:8px; border:1px solid #e6edf5; background:var(--card); overflow:hidden }
#territoryGroups .continentHeader{ display:flex; justify-content:space-between; align-items:center; padding:.5rem .75rem; border-bottom:1px solid rgba(16,24,40,0.04) }
#territoryGroups .continentHeader h4{ margin:0 }
#territoryGroups .continentBody{ padding:.5rem }
#territoryGroups table{ width:100%; border-collapse:collapse; }
tbody tr td.ownerAccent{width:12px;padding:0;border:none}
tbody tr td.nameCell{padding-left:.75rem}
tbody tr:hover{background:#fbfdff}

/* Master territory wrapper */
#territoryMaster{ margin-top: .6rem; border-radius:8px }
#territoryMasterHeader{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem }
#territoryMasterHeader .left{ display:flex; gap:.5rem; align-items:center }
#territorySearch{ min-width:220px; padding:.4rem; border-radius:6px; border:1px solid rgba(16,24,40,.06) }
#roundControls{ margin-left:1rem; display:inline-flex; gap:.5rem; align-items:center }
#territoryWrapper.collapsed{ display:none }

/* Owner swatches in continent header */
.continentHeader .ownerSwatches{ display:flex; gap:.4rem; align-items:center }
.ownerSwatch{ width:14px; height:14px; border-radius:50%; box-shadow:0 1px 2px rgba(11,20,40,0.06); border:1px solid rgba(255,255,255,0.06) }
.ownerSwatchCount{ font-size:.8rem; color:var(--muted); margin-left:.25rem }

/* Modern Buttons */
.btn {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(43, 108, 176, 0.25);
  letter-spacing: 0.3px;
}

.btn:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(43, 108, 176, 0.35);
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(43, 108, 176, 0.3);
}

.btn-ghost {
  background: transparent;
  border: 1px solid rgba(11, 20, 40, 0.1);
  color: var(--muted);
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-ghost:hover {
  background: rgba(11, 20, 40, 0.04);
  border-color: rgba(11, 20, 40, 0.15);
}

button.danger {
  background: var(--danger);
  box-shadow: 0 2px 8px rgba(229, 62, 62, 0.25);
}

button.danger:hover {
  background: #c53030;
  box-shadow: 0 4px 12px rgba(229, 62, 62, 0.35);
}

button.secondary {
  background: #718096;
  box-shadow: 0 2px 8px rgba(113, 128, 150, 0.25);
}

button.secondary:hover {
  background: #4a5568;
  box-shadow: 0 4px 12px rgba(113, 128, 150, 0.35);
}

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

/* Dark theme variables and overrides */
.darkTheme{ --bg:#0b1220; --accent:#1e74d6; --muted:#9aa7bf; --card:#071026; --soft:#0e1a2b }
.darkTheme body{ background: var(--bg); color:#e6eef8 }
.darkTheme header{ background:var(--accent) }
.darkTheme table{ background:var(--card) }
.darkTheme thead{ background: rgba(255,255,255,0.02) }

/* Responsive: collapse nation list into single column on narrow screens */
@media (max-width:720px){
  #nationList{ display:block }
  .nationCard{ width:auto; margin-bottom:.6rem }
}

/* Turn complete badge */
.turnComplete{ display:inline-block; width:16px; height:16px; background:#16a34a; color:white; border-radius:50%; text-align:center; line-height:16px; font-size:12px; margin-left:.45rem }
.nationBox .turnComplete{ margin-left:.35rem }

/* Modern form inputs */
select,
input[type="number"],
input[type="text"] {
  padding: 0.625rem 0.875rem;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: white;
  font-size: 0.95rem;
  font-family: inherit;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

select:focus,
input[type="number"]:focus,
input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(43, 108, 176, 0.1);
}

select:hover,
input[type="number"]:hover,
input[type="text"]:hover {
  border-color: #cbd5e0;
}

/* Purchase calculator */
.purchaseCalculator {
  background: var(--card);
  border: 1px solid #e6edf5;
  padding: 1.25rem;
  border-radius: 12px;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(11, 20, 40, 0.06);
}

.purchaseCalculator h4 {
  margin: 0 0 1rem 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #1a202c;
}

.purchaseCalculator .pcRow {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.purchaseCalculator label {
  min-width: 80px;
  font-weight: 600;
  color: #4a5568;
}

.pcRow #pcNationLabel {
  display: none;
  font-weight: 700;
  margin-left: 0.75rem;
}

.purchaseCalculator select,
.purchaseCalculator input[type="number"] {
  padding: 0.625rem 0.875rem;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  font-size: 0.95rem;
}

.rdTokenSection {
  padding: 1.25rem;
  background: linear-gradient(135deg, #f3e8ff, #faf5ff);
  border-radius: 12px;
  border-left: 4px solid #8b5cf6;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.15);
}

.rdTokenControls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.rdTokenControls button {
  padding: 0.5rem 0.75rem !important;
  min-width: 40px;
  font-weight: 700;
}

.rdTokenControls span {
  min-width: 36px;
  text-align: center;
  font-weight: 700;
  font-size: 1.2rem;
  color: #6b21a8;
}

#buyRDTokens {
  padding: 0.75rem 1.5rem !important;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  min-width: auto;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

#buyRDTokens:hover {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

/* Purchase calculator: modern grouped units layout */
.pcUnits {
  display: block;
}

.pcGroup {
  margin-bottom: 1.75rem;
  background: linear-gradient(135deg, var(--soft), #fafbfc);
  border-radius: 14px;
  padding: 1.5rem;
  border-left: 5px solid var(--accent);
  box-shadow: 0 2px 12px rgba(11, 20, 40, 0.08);
}

.pcGroup h5 {
  margin: 0 0 1.25rem 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pcGroupUnits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}

/* Purchase calculator: modern unit card */
.pcUnitCard {
  background: white;
  border: 1px solid #e6edf5;
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(11, 20, 40, 0.06);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.pcUnitCard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.pcUnitCard:hover::before {
  transform: scaleX(1);
}

.pcUnitCard:hover {
  box-shadow: 0 6px 20px rgba(11, 20, 40, 0.14);
  transform: translateY(-3px);
}

.pcUnitHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.875rem;
  gap: 0.75rem;
}

.unitIcon {
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.pcUnitName {
  font-weight: 700;
  font-size: 1.05rem;
  flex: 1;
  color: #1a202c;
}

.pcUnitCost {
  font-size: 0.95rem;
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--soft), #e0f2fe);
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(43, 108, 176, 0.2);
}

.pcUnitStats {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.statBadge {
  background: linear-gradient(135deg, var(--soft), #f1f5f9);
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  font-size: 0.8rem;
  color: #4a5568;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid rgba(16, 24, 40, 0.08);
}

.pcUnitQty {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}
.pcQtyBtn{ border:none; cursor:pointer; font-weight:700; font-size:1.1rem; width:38px; height:38px; border-radius:8px; transition:all 0.15s; box-shadow:0 2px 4px rgba(0,0,0,0.1) }
.pcQtyBtn:active{ transform:scale(0.93) }
.pcQtyBtn.pcDec{ background:linear-gradient(135deg, #dc2626, #b91c1c); color:#fff }
.pcQtyBtn.pcDec:hover{ background:linear-gradient(135deg, #b91c1c, #991b1b); box-shadow:0 3px 6px rgba(220,38,38,0.3) }
.pcQtyBtn.pcInc{ background:linear-gradient(135deg, #16a34a, #15803d); color:#fff }
.pcQtyBtn.pcInc:hover{ background:linear-gradient(135deg, #15803d, #166534); box-shadow:0 3px 6px rgba(22,163,74,0.3) }
.pcQtyInput{ width:54px; text-align:center; padding:.4rem; border:2px solid rgba(16,24,40,.1); border-radius:8px; font-weight:700; font-size:1rem; transition:border-color 0.2s }
.pcQtyInput:focus{ border-color:var(--accent); outline:none; box-shadow:0 0 0 3px rgba(43,108,176,0.1) }

.pcSummary{ margin-top:.75rem; font-weight:700; font-size:1.05rem; color:var(--text) }
.pcActions{ margin-top:.6rem; display:flex; gap:.65rem }
@media (max-width:720px){ .pcGroupUnits{ grid-template-columns: 1fr } }

/* Summary R&D visual spacing */
.summary-rd { margin-top: 8px; display: flex; align-items: center; gap: 8px; }
.summary-rd-reset { margin-left: 8px; }
/* Discounted unit visual */
.pcUnitCard.pcDiscount{ border-left:4px solid #16a34a; background: linear-gradient(90deg, rgba(22,163,74,0.04), transparent); }
.pcUnitCost .discountTag{ display:inline-block; margin-left:.4rem; padding:.15rem .35rem; background:#16a34a; color:#fff; border-radius:6px; font-size:.7rem }

/* Purchase groups (land/air/sea) */
.pcIcon{ margin-right:.45rem; font-size:1.05rem }

/* Nation panel: pending purchases and treasury */
#nationSummary .treasury{ margin-top:.6rem; font-weight:700 }
#pendingPurchases{ margin-top:.5rem; background:var(--soft); padding:.5rem; border-radius:8px }
.pendingItem{ display:flex; justify-content:space-between; gap:.5rem; padding:.25rem 0 }
.btn-pay{ background:#16a34a; color:white }
.btn-negative{ background:#e53e3e; color:white }

/* Modern Round History Modal */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal.hidden {
  display: none;
}

.modalContent {
  background: var(--card);
  border-radius: 16px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modalHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #e6edf5;
  background: linear-gradient(180deg, var(--soft), #fafbfc);
}

.modalHeader h2 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: #1a202c;
  letter-spacing: -0.5px;
}

.btn-close {
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  padding: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.btn-close:hover {
  color: #1a202c;
  background: rgba(0, 0, 0, 0.05);
}

.modalBody {
  padding: 2rem;
  overflow-y: auto;
  flex: 1;
}

.roundHistoryNav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, var(--soft), #fafbfc);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(11, 20, 40, 0.06);
}

#historyRoundLabel {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a202c;
  letter-spacing: -0.5px;
}

.nationHistoryCard {
  background: var(--card);
  border: 1px solid #e6edf5;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 8px rgba(11, 20, 40, 0.06);
  transition: all 0.2s ease;
}

.nationHistoryCard:hover {
  box-shadow: 0 4px 12px rgba(11, 20, 40, 0.1);
}

.nationHistoryCard h3 {
  margin: 0 0 1rem 0;
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #1a202c;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--soft);
}

.historySection {
  margin-bottom: 1rem;
}

.historySection h4 {
  margin: 0 0 0.75rem 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: #4a5568;
}

.historyList {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.historyItem {
  background: var(--soft);
  padding: 0.5rem 0.875rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.historyItem:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.territoryGained {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  color: #166534;
  border: 1px solid #86efac;
}

.territoryLost {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #991b1b;
  border: 1px solid #fca5a5;
}

.techAcquired {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: #1e40af;
  border: 1px solid #93c5fd;
}

.purchaseItem {
  background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
  color: #6b21a8;
  border: 1px solid #d8b4fe;
}