/* Soft charcoal panels around the original pixel artwork and Minecraft maps. */
:root {
  --bg: #080b10;
  --panel: #1a222c;
  --panel2: #222c37;
  --line: #35404c;
  --green: #8dce66;
  --muted: #a1acb8;
  --text: #eef1f4;
  --board-stone: #1a222c;
  --board-edge: #35404c;
  --radius-panel: 16px;
  --radius-control: 9px;
}
body {
  background-image: radial-gradient(
    ellipse at 80% 12%,
    #25303d55,
    transparent 55%
  );
}
.site-header {
  background: #0c1017;
  border-bottom: 1px solid #2c3540;
  box-shadow: none;
}
.hero {
  grid-template-columns: 1.35fr 1fr;
  padding-top: 52px;
  padding-bottom: 52px;
}
.hero h1 {
  font-size: clamp(48px, 4.4vw, 64px);
  line-height: 1.05;
}
.hero h1 span {
  color: var(--green);
}
.button {
  border-radius: var(--radius-control);
  background: #293542;
  border: 1px solid #526071;
  box-shadow:
    inset 0 1px #ffffff14,
    0 3px 8px #04070b55;
  padding: 10px 20px;
}
.button.primary {
  background: linear-gradient(#9ada72, #77b852);
  border: 1px solid #a6df80;
  color: #14200e;
  box-shadow:
    inset 0 1px #ddffc080,
    0 3px 8px #04070b55;
}
.button.primary:hover {
  background: linear-gradient(#ace783, #88c962);
}
.button:hover {
  transform: translateY(-1px);
}
.button:active {
  transform: translateY(1px);
}
/* .header-account deliberately retains its existing square, beveled styling. */
.compass-art {
  border-radius: 50%;
  border: 1px solid #536170;
  background: #202b36;
  width: 62px;
  height: 62px;
  box-shadow:
    inset 0 1px #ffffff15,
    0 5px 14px #04070b66;
}
.floating-tag {
  border-radius: var(--radius-control);
  background: #171f29;
  border-color: #35404c;
  box-shadow: 0 4px 12px #04070b55;
}
.world-stats {
  position: relative;
  z-index: 1;
  width: calc(100% - 56px);
  max-width: 1104px;
  margin: -9px auto 0;
  padding: 23px 24px;
  border: 1px solid #35404c;
  border-radius: var(--radius-panel);
  background: #1a222c;
  box-shadow: 0 8px 24px #03060a55;
}
.world-stats > div {
  border-color: #35404c;
}
.world-stats .stat-cube.gold-cube {
  background: #cba950;
  border-color: #edca74;
}
.world-stats .stat-cube.cyan-cube {
  background: #60b8bb;
  border-color: #94dcde;
}
.world-stats .stat-cube.red-cube {
  background: #c16067;
  border-color: #e98a91;
}
.map-card,
.home-page .map-card {
  border: 1px solid #35404c;
  border-radius: var(--radius-panel);
  background: #1a222c;
  box-shadow: 0 4px 16px #03060a40;
  overflow: hidden;
}
.map-card:hover {
  border-color: #6c8b59;
  transform: translateY(-3px);
}
.card-body,
.home-page .card-body {
  background: #1a222c;
}
.card-type,
.card-number,
.badge {
  border-radius: 4px;
}
.leaderboard-preview-board,
.rankings-board,
.home-panel,
.tool-card,
.start-panel,
.auth-card,
.settings-card,
.editor-panel,
.report-dialog,
.result-summary,
.round-result,
.empty-state,
.first-map-panel {
  border-radius: var(--radius-panel);
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 5px 18px #03060a40;
}
.leaderboard-preview-board,
.rankings-board {
  overflow: hidden;
}
.leaderboard-table thead {
  background: #131b24;
}
.home-panels {
  gap: 24px;
}
.home-panel,
.home-panel + .home-panel {
  padding: 28px;
  border: 1px solid var(--line);
}
.mode-row {
  border-radius: var(--radius-control);
  background: #202b36;
  border-color: #3b4856;
  box-shadow: none;
}
.mode-row:hover {
  background: #293642;
  border-color: #6c8b59;
}
.contribute-banner {
  border-radius: var(--radius-panel);
  background: #19251f;
  border: 1px solid #435942;
  box-shadow: none;
}
.leaderboard-filters a,
.leaderboard-pagination a,
.difficulty-options button,
.filter-tabs button,
.icon-button,
.auth-tabs a {
  border-radius: var(--radius-control);
}
.field input,
.field textarea,
.field select,
.search-field,
.leaderboard-search,
.preview-toolbar select {
  border-radius: var(--radius-control);
}
.draft-row,
.token-box,
.preview-tile,
.leaderboard-rules article {
  border-radius: var(--radius-control);
}
.player-avatar {
  border-radius: 5px;
  overflow: hidden;
}
@media (max-width: 1000px) {
  .hero {
    grid-template-columns: 1.15fr 1fr;
  }
  .hero h1 {
    font-size: 54px;
  }
}
@media (max-width: 700px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 36px 22px 32px;
  }
  .hero h1 {
    font-size: clamp(43px, 10.8vw, 58px);
  }
  .world-stats {
    width: calc(100% - 40px);
    padding: 22px 18px;
    gap: 24px 12px;
  }
  .world-stats strong {
    font-size: 28px;
  }
  .home-panel,
  .home-panel + .home-panel {
    padding: 23px 20px;
  }
  .home-panels {
    gap: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  a,
  button {
    transition: none;
  }
}