* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f7f7f7;
  color: #222;
  line-height: 1.5;
}
#root {
  /* Remove max-width constraint to allow full-width HUD */
  /* Content area will be centered via .content class */
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.header span {
  font-weight: bold;
}
button {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  background-color: #2f80ed;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
button:hover {
  background-color: #1c63b0;
}
/* Sticky HUD */
.hud {
  position: sticky;
  top: 0;
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  padding: 12px 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  z-index: 10;
}

.hud-section {
  display: flex;
  gap: 20px;
  align-items: center;
  grid-column: 2;
  justify-self: center;
}

.hud-card {
  background: #fafafa;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #e5e5e5;
  text-align: center;
  min-width: 100px;
}

.hud-card .label {
  font-size: 12px;
  color: #666;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.hud-card .value {
  font-size: 15px;
  font-weight: bold;
}

.hud-buttons {
  display: flex;
  gap: 10px;
  grid-column: 3;
  justify-self: end;
}

.hud-buttons button {
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: #a8a7a7;
  transition: background 0.2s;
  font-size: 14px;
}

.hud-buttons button:hover:not(:disabled) {
  background: #797777;
}

.hud-buttons button.danger {
  background: #ff0a0a;
}

.hud-buttons button.danger:hover:not(:disabled) {
  background: #ffcccc;
}

.hud-buttons button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.content {

  margin: 30px auto;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  text-align: left;
}
.content a {
  color: #2f80ed;
  text-decoration: none;
}
.content a:hover {
  text-decoration: underline;
}
/* Enhanced styles for game components */
.game-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
/*  max-width: 800px; */
  margin: 0 auto;
  padding: 2rem 1rem;
}
/* During active gameplay, allow HUD to break out to full-width */
.game-board > .hud {
  width: calc(100% + 2rem);
  max-width: none;
  margin-left: -1rem;
  margin-right: -1rem;
  padding-left: 20px;
  padding-right: 20px;
}
/* Center content during active gameplay */
.game-board > .content {
  width: 100%;
  align-self: center;
  text-align: left;
}
/* Center start screen elements */
.game-board > h1 {
  text-align: center;
  margin-bottom: 1rem;
  width: 100%;
}
.game-board > p {
  text-align: center;
  margin: 0.5rem 0;
  width: 100%;
}
.game-board > button {
  margin: 1rem auto;
  display: block;
}
.game-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background-color: #f5f5f5;
  border-radius: 4px;
}
.stats-row {
  display: flex;
  gap: 0.5rem;
}
.stat-label {
  font-weight: bold;
  color: #666;
}
.stat-value {
  color: #333;
}
.game-actions {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.btn {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.btn-primary {
  background-color: #2f80ed;
  color: white;
}
.btn-primary:hover:not(:disabled) {
  background-color: #1c63b0;
}
.btn-primary:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
.game-mode-selector {
  margin-bottom: 1rem;
  padding: 1rem;
  background-color: #f9f9f9;
  border-radius: 4px;
}
.mode-selector-label {
  display: block;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #333;
}
.mode-options {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.mode-option {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  border: 2px solid #ddd;
  border-radius: 4px;
  background-color: white;
  color: #333;
  cursor: pointer;
  transition: all 0.2s;
}
.mode-option:hover:not(:disabled) {
  border-color: #2f80ed;
  background-color: #f0f7ff;
}
.mode-option.active {
  border-color: #2f80ed;
  background-color: #2f80ed;
  color: white;
  font-weight: bold;
}
.mode-option:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.game-mode-display {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background-color: #e3f2fd;
  border: 1px solid #2f80ed;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: bold;
  color: #2f80ed;
  text-transform: capitalize;
}
.btn-secondary {
  background-color: #6c757d;
  color: white;
}
.btn-secondary:hover {
  background-color: #5a6268;
}
.page-content {
  margin-top: 1rem;
  /* Preserve Wikipedia's original styling - minimal overrides */
  max-width: 100%;
  overflow-x: auto;
  text-align: left;
}
/* Disabled external links */
.page-content .disabled-link {
  color: #d9534f !important;
  cursor: not-allowed !important;
  opacity: 0.8;
}
.page-content .disabled-link:hover {
  text-decoration: none !important;
}
/* Ensure Wikipedia images display properly without breaking layout */
.page-content img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* Ensure Wikipedia tables don't overflow */
.page-content table {
  max-width: 100%;
  /* display: block; -- REMOVED to fix infobox layout */
  overflow-x: auto;
}
/* Preserve Wikipedia's infobox styling */
.page-content .infobox {
  width: auto;
}
.page-content.loading {
  text-align: center;
  padding: 2rem;
  color: #666;
}
.page-content.error {
  padding: 1rem;
  background-color: #fee;
  border: 1px solid #fcc;
  border-radius: 4px;
  color: #c33;
}
.error-message {
  padding: 0.5rem;
  background-color: #fee;
  border: 1px solid #fcc;
  border-radius: 4px;
  color: #c33;
  margin-top: 0.5rem;
}
.info-box {
  padding: 1rem;
  margin: 1rem 0;
  background-color: #e3f2fd;
  border: 1px solid #90caf9;
  border-radius: 4px;
  color: #1565c0;
  text-align: left;
  max-width: 600px;
  width: 100%;
}
.info-box strong {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  color: #0d47a1;
  text-align: center;
}
.info-box p {
  margin: 0.5rem 0;
  line-height: 1.6;
  text-align: left;
}
.info-box p:last-child {
  margin-bottom: 0;
}
.game-completion {
  text-align: center;
  padding: 2rem;
}
.completion-title {
  color: #2f80ed;
  margin-bottom: 1rem;
}
.completion-message {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}
.completion-stats {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background-color: #f5f5f5;
  border-radius: 4px;
}
.stat-item {
  display: flex;
  justify-content: space-between;
}
.completion-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}
.completion-path {
  margin-top: 2rem;
  text-align: left;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.path-title {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #333;
}
.path-list {
  background-color: #f5f5f5;
  padding: 1rem;
  border-radius: 4px;
  max-height: 300px;
  overflow-y: auto;
}
.path-item {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #ddd;
}
.path-item:last-child {
  border-bottom: none;
}
.path-number {
  font-weight: bold;
  color: #666;
  min-width: 2rem;
}
.path-page {
  color: #333;
  word-break: break-word;
}
.timer {
  display: flex;
  gap: 0.5rem;
  font-size: 1.1rem;
}
.timer-label {
  font-weight: bold;
}
.timer-value {
  font-family: monospace;
}
/* Navigation History Styles */
.navigation-history {
  margin: 1rem 0;
  padding: 1rem;
  background-color: #f9f9f9;
  border-radius: 4px;
  border: 1px solid #ddd;
}
.history-title {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #333;
}
.history-steps {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.history-step {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
  background-color: white;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.history-step:hover {
  background-color: #e3f2fd;
}
.step-number {
  font-weight: bold;
  color: #666;
  min-width: 2rem;
}
.step-pages {
  flex: 1;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.step-source {
  color: #333;
}
.step-arrow {
  color: #666;
}
.step-target {
  color: #2f80ed;
  font-weight: 500;
}
/* Path Viewer Styles */
.path-viewer {
  margin: 1rem 0;
  padding: 1rem;
  background-color: #f9f9f9;
  border-radius: 4px;
  border: 1px solid #ddd;
}
.path-title {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #333;
}
.path-list {
  background-color: white;
  padding: 1rem;
  border-radius: 4px;
  max-height: 300px;
  overflow-y: auto;
}
.path-item {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.2s;
}
.path-item:hover {
  background-color: #e3f2fd;
}
.path-item.active {
  background-color: #bbdefb;
}
.path-view-link {
  color: #2f80ed;
  font-size: 0.9rem;
  margin-left: auto;
}
.path-viewer-content {
  margin-top: 1rem;
  padding: 1rem;
  background-color: white;
  border-radius: 4px;
  border: 1px solid #ddd;
}
.viewer-title {
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: #333;
}
.navigation-history.loading,
.navigation-history.error,
.navigation-history.empty,
.path-viewer.loading,
.path-viewer.error,
.path-viewer.empty {
  text-align: center;
  padding: 2rem;
  color: #666;
}

/* --- Wikipedia Styling Support --- */

/* Infobox */
.page-content .infobox {
  border: 1px solid #a2a9b1;
  border-spacing: 3px;
  background-color: #f8f9fa;
  color: black;
  margin: 0.5em 0 0.5em 1em;
  padding: 0.2em;
  float: right;
  clear: right;
  font-size: 88%;
  line-height: 1.5em;
  width: 22em;
}

.page-content .infobox caption {
  font-size: 125%;
  font-weight: bold;
  padding: 0.2em;
  text-align: center;
}

.page-content .infobox td,
.page-content .infobox th {
  vertical-align: top;
  text-align: left;
}

/* Navbox */
.page-content .navbox {
  box-sizing: border-box;
  border: 1px solid #a2a9b1;
  width: 100%;
  clear: both;
  font-size: 88%;
  text-align: center;
  padding: 1px;
  margin: 1em auto 0;
}

.page-content .navbox .navbox {
  margin-top: 0;
}

.page-content .navbox + .navbox {
  margin-top: -1px;
}

.page-content .navbox-inner,
.page-content .navbox-subgroup {
  width: 100%;
}

.page-content .navbox-group,
.page-content .navbox-title,
.page-content .navbox-abovebelow {
  padding: 0.25em 1em;
  line-height: 1.5em;
  text-align: center;
}

.page-content th.navbox-group {
  white-space: nowrap;
  text-align: right;
}

.page-content .navbox-list {
  line-height: 1.5em;
  border-color: #fdfdfd;
}

.page-content .navbox th,
.page-content .navbox-title {
  background-color: #ccf;
}

.page-content .navbox-abovebelow,
.page-content th.navbox-group,
.page-content .navbox-subgroup .navbox-title {
  background-color: #ddf;
}

.page-content .navbox-subgroup .navbox-group,
.page-content .navbox-subgroup .navbox-abovebelow {
  background-color: #e6e6ff;
}

.page-content .navbox-even {
  background-color: #f7f7f7;
}

.page-content .navbox-odd {
  background-color: transparent;
}

/* Thumbnails */
.page-content .thumb {
  margin-bottom: 0.5em;
  width: auto;
}

.page-content .thumb.tright {
  margin: 0.5em 0 0.5em 1.4em;
  float: right;
  clear: right;
}

.page-content .thumb.tleft {
  margin: 0.5em 1.4em 0.5em 0;
  float: left;
  clear: left;
}

.page-content .thumbinner {
  border: 1px solid #c8ccd1;
  padding: 3px;
  background-color: #f8f9fa;
  font-size: 94%;
  text-align: center;
  overflow: hidden;
}

.page-content .thumbcaption {
  border: none;
  text-align: left;
  line-height: 1.4em;
  padding: 3px;
  font-size: 94%;
  color: #202122;
}

/* Catlinks */
.page-content .catlinks {
  border: 1px solid #a2a9b1;
  background-color: #f8f9fa;
  padding: 5px;
  margin-top: 1em;
  clear: both;
}

.page-content .catlinks ul {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-content .catlinks li {
  display: inline-block;
  line-height: 1.25em;
  border-left: 1px solid #a2a9b1;
  margin: 0.125em 0;
  padding: 0 0.5em;
}

.page-content .catlinks li:first-child {
  padding-left: 0.25em;
  border-left: none;
}

.page-content .mw-hidden-catlinks.mw-hidden-cats-hidden {
  display: none;
}

/* Wikipedia CSS Variables from Vector skin */
:root {
  --color-base: #202122;
  --color-base-fixed: #202122;
  --color-base--hover: #404244;
  --color-emphasized: #101418;
  --color-subtle: #54595d;
  --color-placeholder: #72777d;
  --color-disabled: #a2a9b1;
  --color-disabled-emphasized: #a2a9b1;
  --color-inverted: #fff;
  --color-inverted-fixed: #fff;
  --color-progressive: #36c;
  --color-progressive--hover: #3056a9;
  --color-progressive--active: #233566;
  --color-progressive--focus: #36c;
  --color-destructive: #bf3c2c;
  --color-destructive--hover: #9f3526;
  --color-destructive--active: #612419;
  --color-destructive--focus: #36c;
  --color-visited: #6a60b0;
  --color-visited--hover: #534fa3;
  --color-visited--active: #353262;
  --color-destructive--visited: #9f5555;
  --color-destructive--visited--hover: #854848;
  --color-destructive--visited--active: #512e2e;
  --color-error: #bf3c2c;
  --color-error--hover: #9f3526;
  --color-error--active: #612419;
  --color-warning: #886425;
  --color-success: #177860;
  --color-notice: #404244;
  --color-icon-error: #f54739;
  --color-icon-warning: #ab7f2a;
  --color-icon-success: #099979;
  --color-icon-notice: #72777d;
  --color-content-added: #006400;
  --color-content-removed: #8b0000;
  --filter-invert-icon: 0;
  --filter-invert-primary-button-icon: 1;
  --box-shadow-color-base: #a2a9b1;
  --box-shadow-color-progressive--active: #233566;
  --box-shadow-color-progressive--focus: #36c;
  --box-shadow-color-progressive-selected: #36c;
  --box-shadow-color-progressive-selected--hover: #3056a9;
  --box-shadow-color-progressive-selected--active: #233566;
  --box-shadow-color-destructive--focus: #36c;
  --box-shadow-color-inverted: #fff;
  --box-shadow-color-alpha-base: rgba(0,0,0,0.06);
  --box-shadow-color-transparent: transparent;
  --mix-blend-mode-base: normal;
  --mix-blend-mode-blend: multiply;
  --background-color-base: #fff;
  --background-color-base-fixed: #fff;
  --background-color-neutral: #eaecf0;
  --background-color-neutral-subtle: #f8f9fa;
  --background-color-interactive: #eaecf0;
  --background-color-interactive--hover: #dadde3;
  --background-color-interactive--active: #c8ccd1;
  --background-color-interactive-subtle: #f8f9fa;
  --background-color-interactive-subtle--hover: #eaecf0;
  --background-color-interactive-subtle--active: #dadde3;
  --background-color-disabled: #dadde3;
  --background-color-disabled-subtle: #eaecf0;
  --background-color-inverted: #101418;
  --background-color-progressive: #36c;
  --background-color-progressive--hover: #3056a9;
  --background-color-progressive--active: #233566;
  --background-color-progressive--focus: #36c;
  --background-color-progressive-subtle: #f1f4fd;
  --background-color-progressive-subtle--hover: #d9e2ff;
  --background-color-progressive-subtle--active: #b6d4fb;
  --background-color-destructive: #bf3c2c;
  --background-color-destructive--hover: #9f3526;
  --background-color-destructive--active: #612419;
  --background-color-destructive--focus: #36c;
  --background-color-destructive-subtle: #ffe9e5;
  --background-color-destructive-subtle--hover: #ffdad3;
  --background-color-destructive-subtle--active: #ffc8bd;
  --background-color-error: #f54739;
  --background-color-error--hover: #d74032;
  --background-color-error--active: #bf3c2c;
  --background-color-error-subtle: #ffe9e5;
  --background-color-error-subtle--hover: #ffdad3;
  --background-color-error-subtle--active: #ffc8bd;
  --background-color-warning-subtle: #fdf2d5;
  --background-color-success-subtle: #dff2eb;
  --background-color-notice-subtle: #eaecf0;
  --background-color-content-added: #a3d3ff;
  --background-color-content-removed: #ffe49c;
  --background-color-transparent: transparent;
  --background-color-backdrop-light: rgba(255,255,255,0.65);
  --background-color-backdrop-dark: rgba(0,0,0,0.65);
  --background-color-button-quiet--hover: rgba(0,24,73,0.027);
  --background-color-button-quiet--active: rgba(0,24,73,0.082);
  --background-color-input-binary--checked: #36c;
  --background-color-tab-list-item-framed--hover: rgba(255,255,255,0.3);
  --background-color-tab-list-item-framed--active: rgba(255,255,255,0.65);
  --opacity-icon-base: 0.87;
  --opacity-icon-base--hover: 0.74;
  --opacity-icon-base--selected: 1;
  --opacity-icon-base--disabled: 0.51;
  --opacity-icon-placeholder: 0.51;
  --opacity-icon-subtle: 0.67;
  --border-color-base: #a2a9b1;
  --border-color-emphasized: #202122;
  --border-color-subtle: #c8ccd1;
  --border-color-muted: #dadde3;
  --border-color-interactive: #72777d;
  --border-color-interactive--hover: #27292d;
  --border-color-interactive--active: #202122;
  --border-color-disabled: #c8ccd1;
  --border-color-inverted: #fff;
  --border-color-inverted-fixed: #fff;
  --border-color-progressive: #6485d1;
  --border-color-progressive--hover: #3056a9;
  --border-color-progressive--active: #233566;
  --border-color-progressive--focus: #36c;
  --border-color-destructive: #f54739;
  --border-color-destructive--hover: #9f3526;
  --border-color-destructive--active: #612419;
  --border-color-destructive--focus: #36c;
  --border-color-error: #f54739;
  --border-color-error--hover: #9f3526;
  --border-color-error--active: #612419;
  --border-color-warning: #ab7f2a;
  --border-color-warning--hover: #735421;
  --border-color-warning--active: #453217;
  --border-color-success: #099979;
  --border-color-notice: #72777d;
  --border-color-content-added: #a3d3ff;
  --border-color-content-removed: #ffe49c;
  --border-color-transparent: transparent;
  --border-color-divider: #a2a9b1;
  --outline-color-progressive--focus: #36c;
  --color-link: var(--color-progressive);
  --color-link--hover: var(--color-progressive--hover);
  --color-link--active: var(--color-progressive--active);
  --color-link--focus: var(--color-progressive--focus);
  --color-link--visited: var(--color-visited);
  --color-link--visited--hover: var(--color-visited--hover);
  --color-link--visited--active: var(--color-visited--active);
  --color-link-red: var(--color-destructive);
  --color-link-red--hover: var(--color-destructive--hover);
  --color-link-red--active: var(--color-destructive--active);
  --color-link-red--focus: var(--color-destructive--focus);
  --color-link-red--visited: var(--color-destructive--visited);
  --color-link-red--visited--hover: var(--color-destructive--visited--hover);
  --color-link-red--visited--active: var(--color-destructive--visited--active);
  --accent-color-base: #36c;
  --border-color-input--hover: var(--border-color-interactive);
  --border-color-input-binary: var(--border-color-interactive);
  --border-color-input-binary--hover: var(--border-color-progressive--hover);
  --border-color-input-binary--active: var(--border-color-progressive--active);
  --border-color-input-binary--focus: var(--border-color-progressive--focus);
  --border-color-input-binary--checked: var(--border-color-progressive);
  --color-base--subtle: #54595d;
  --font-size-medium: var(--font-size-medium,1rem);
  --line-height-medium: 1.6;
  --line-height-content: 1.625;
}