:root {
  --paper-base: #d7c6a0;
  --paper-dark: #b89f74;
  --ink: #2e2517;
  --ink-soft: #5f4d31;
  --card: rgba(247, 236, 207, 0.9);
  --card-border: #7d5f36;
  --player: #2f66b3;
  --aurora: #b3472f;
  --crimson: #8f2f44;
  --neutral: #6a6a5d;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter", "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.22), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(120, 80, 30, 0.2), transparent 45%),
    repeating-linear-gradient(
      24deg,
      rgba(98, 71, 34, 0.04) 0,
      rgba(98, 71, 34, 0.04) 2px,
      transparent 2px,
      transparent 12px
    ),
    linear-gradient(180deg, var(--paper-base), #cdb488 40%, var(--paper-dark));
  min-height: 100vh;
}

.layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  min-height: 100vh;
  gap: 16px;
  padding: 16px;
}

.panel {
  background: var(--card);
  border: 2px solid var(--card-border);
  border-radius: 10px;
  padding: 16px;
  box-shadow:
    0 2px 0 rgba(90, 62, 30, 0.5),
    0 10px 24px rgba(46, 34, 16, 0.25);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: "Cinzel", "Times New Roman", serif;
  letter-spacing: 0.03em;
}

h1 {
  font-size: 1.9rem;
  text-transform: uppercase;
  margin-bottom: 4px;
}

h2 {
  font-size: 1.15rem;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.sub,
.hint {
  color: #6e5a3a;
}

.hud-card {
  margin-bottom: 14px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.stat {
  background: #f2e5c6;
  border: 1px solid #99784a;
  border-radius: 8px;
  padding: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.stat div {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6f5732;
}

.stat strong {
  font-family: "Cinzel", "Times New Roman", serif;
  font-size: 1.05rem;
}

.buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

button {
  background: linear-gradient(#8f6b3d, #76552f);
  border: 1px solid #4d3418;
  color: #fff7e9;
  border-radius: 7px;
  padding: 10px;
  cursor: pointer;
  font-weight: 600;
}

button:hover { filter: brightness(1.08); }

.map-panel {
  position: relative;
}

.map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 10px;
  isolation: isolate;
}

.map::before {
  content: "";
  position: absolute;
  inset: 8% 4%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.95;
  background:
    linear-gradient(125deg, transparent 17%, rgba(80, 34, 20, 0.78) 18%, transparent 20%),
    linear-gradient(35deg, transparent 41%, rgba(18, 18, 18, 0.75) 43%, transparent 45%),
    linear-gradient(152deg, transparent 57%, rgba(80, 34, 20, 0.78) 58%, transparent 60%),
    linear-gradient(21deg, transparent 72%, rgba(18, 18, 18, 0.75) 74%, transparent 76%);
}

.region {
  position: relative;
  z-index: 1;
  min-height: 120px;
  border-radius: 8px;
  padding: 10px;
  border: 2px solid #3f2d17;
  outline: 1px solid rgba(255, 255, 255, 0.45);
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  color: #fffaf0;
  text-shadow: 0 1px 1px rgba(20, 14, 8, 0.65);
}

.region.selected {
  border-color: #f7e8be;
  box-shadow: 0 0 0 3px rgba(243, 209, 128, 0.92), 0 0 0 6px rgba(53, 36, 16, 0.6);
}

.region.owner-Player { background: #2f66b3; }
.region.owner-Aurora\ Pact { background: #b3472f; }
.region.owner-Crimson\ Bloc { background: #8f2f44; }
.region.owner-Neutral { background: #6a6a5d; }

.region .name {
  font-family: "Cinzel", "Times New Roman", serif;
  font-weight: 700;
  font-size: 1.05rem;
}

.region .meta {
  font-size: 0.84rem;
  color: #f8efe0;
}

.log ul,
.log li {
  margin: 0;
  padding: 0;
  list-style: none;
}

#log {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 300px;
  overflow: auto;
}

#log li {
  background: #f2e5c8;
  border: 1px solid #9d7b4a;
  border-radius: 7px;
  padding: 8px;
  font-size: 0.9rem;
  color: #3b2d1b;
}

@media (max-width: 1024px) {
  .layout {
    grid-template-columns: 1fr;
  }
}