:root {
  --ink: #e7e0c8;
  --muted: #aaa892;
  --gold: #c5a052;
  --gold-light: #f3d485;
  --panel: rgba(22, 33, 36, 0.96);
  --panel-deep: #0d171a;
  --line: rgba(213, 181, 100, 0.5);
  --green: #718b51;
  --red: #7d2925;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #223532;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
}

a { color: inherit; }

.world-map {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: 92px 20px 50px;
  background:
    linear-gradient(rgba(14, 25, 24, 0.28), rgba(8, 15, 16, 0.7)),
    radial-gradient(ellipse at 17% 27%, transparent 0 16%, rgba(38, 57, 42, 0.95) 16.4% 26%, transparent 26.5%),
    radial-gradient(ellipse at 72% 19%, transparent 0 11%, rgba(101, 91, 62, 0.86) 11.4% 23%, transparent 23.5%),
    radial-gradient(ellipse at 76% 78%, transparent 0 14%, rgba(90, 48, 50, 0.8) 14.4% 27%, transparent 27.5%),
    linear-gradient(119deg, #536d68 0 21%, #60766d 21% 43%, #344e51 43% 67%, #596348 67% 100%);
}

.world-map::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.24;
  background-image: repeating-linear-gradient(118deg, transparent 0 18px, rgba(255,255,255,0.06) 19px, transparent 20px), repeating-radial-gradient(circle at 30% 20%, transparent 0 3px, rgba(0,0,0,0.17) 4px, transparent 5px);
  mix-blend-mode: overlay;
}

.map-labels span {
  position: fixed;
  color: rgba(10, 17, 17, 0.34);
  font-size: clamp(22px, 3.8vw, 68px);
  letter-spacing: 0.13em;
  z-index: 0;
  pointer-events: none;
}

.label-north { top: 18%; left: 37%; transform: rotate(-9deg); }
.label-east { top: 45%; right: -2%; transform: rotate(76deg); }
.label-south { bottom: 8%; left: 28%; transform: rotate(6deg); }

.topbar {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 18px;
  background: linear-gradient(#263b43, #17272d 58%, #0d171b);
  border-bottom: 3px ridge var(--gold);
  box-shadow: 0 6px 18px rgba(0,0,0,0.55), inset 0 1px rgba(255,255,255,0.18);
}

.realm-title { min-width: 250px; }
.realm-title span, .eyebrow, .section-kicker { display: block; color: #a8b89e; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.realm-title strong { display: block; margin-top: 3px; font-size: 16px; font-weight: normal; color: #fff8dd; }

.resources { display: flex; flex: 1; justify-content: center; gap: 7px; }
.resource { min-width: 92px; padding: 5px 10px; display: flex; justify-content: space-between; gap: 8px; border: 1px solid #755d2f; border-radius: 12px; background: linear-gradient(#1a2a30, #10191d); box-shadow: inset 0 0 0 2px rgba(188,157,86,0.13); }
.resource span, .date-plate span { color: #a6aea6; font: 10px Arial, sans-serif; text-transform: uppercase; }
.resource strong { color: var(--gold-light); }
.date-plate { min-width: 120px; padding: 7px 14px; text-align: center; border: 1px solid #816531; background: #111c20; }
.date-plate strong { display: block; color: white; font-size: 16px; }

.seal {
  width: 76px;
  aspect-ratio: 0.88;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #f6d983;
  font-size: 27px;
  font-weight: bold;
  text-shadow: 0 2px #35120f;
  border: 4px double #dbb254;
  border-radius: 50% 50% 45% 45% / 43% 43% 57% 57%;
  background: linear-gradient(135deg, #8f3029 0 48%, #6f1f1d 48% 52%, #273c46 52%);
  box-shadow: 0 0 0 3px #4e3415, 0 7px 16px rgba(0,0,0,0.45), inset 0 0 18px rgba(0,0,0,0.45);
}

.small-seal { width: 48px; font-size: 16px; border-width: 3px; }

.nav-ribbon {
  position: relative;
  z-index: 8;
  display: flex;
  gap: 4px;
  max-width: 750px;
  margin: 0 auto 16px;
  padding: 6px;
  border: 1px solid #8c723a;
  background: rgba(15, 27, 31, 0.95);
  box-shadow: 0 5px 14px rgba(0,0,0,0.45);
}

.nav-ribbon a { flex: 1; padding: 9px 12px; text-align: center; text-decoration: none; color: #e5dcc3; font-size: 13px; border: 1px solid transparent; background: linear-gradient(#344842, #1d2e2a); transition: 160ms ease; }
.nav-ribbon a:hover, .nav-ribbon a:focus-visible { color: #fff0a6; border-color: #b18b42; transform: translateY(-1px); outline: none; }

.paused {
  position: relative;
  z-index: 6;
  width: 210px;
  margin: 0 auto -11px;
  padding: 7px 18px 8px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  color: #fff0d1;
  background: linear-gradient(90deg, transparent, #7c2b27 15%, #a34635 50%, #7c2b27 85%, transparent);
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.5));
}

.interface-grid {
  position: relative;
  z-index: 5;
  width: min(1500px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 285px minmax(480px, 1fr) 285px;
  align-items: start;
  gap: 12px;
}

.panel {
  border: 2px ridge #a88643;
  background: linear-gradient(145deg, rgba(37,53,57,0.98), rgba(14,25,28,0.98));
  box-shadow: 0 12px 28px rgba(0,0,0,0.55), inset 0 0 0 2px #0c1517, inset 0 0 24px rgba(0,0,0,0.4);
}

.panel-title { padding: 10px 14px; text-align: center; color: #fff8e5; font-size: 19px; background: linear-gradient(#526148, #283528 55%, #1b251b); border-bottom: 3px double #9b7b3a; text-shadow: 0 2px #000; }
.profile-panel, .ledger-panel { position: sticky; top: 88px; }

.portrait-wrap { display: flex; align-items: center; gap: 15px; padding: 22px 18px 18px; background: radial-gradient(circle at 25% 30%, rgba(152,128,73,0.15), transparent 50%); }
.portrait-wrap h1 { margin: 4px 0 0; color: #fff8df; font-size: 30px; line-height: 0.95; font-weight: normal; }
.rank-banner { margin: 0 14px 14px; padding: 6px; text-align: center; color: #f3deb0; font-size: 12px; background: linear-gradient(90deg, transparent, #42533a, transparent); border-block: 1px solid rgba(204,176,100,0.42); }

.profile-stats { margin: 0; padding: 0 16px 15px; }
.profile-stats div { padding: 9px 0; border-bottom: 1px solid rgba(195,167,92,0.2); }
.profile-stats dt { color: #8fa294; font: 9px Arial, sans-serif; letter-spacing: 0.13em; text-transform: uppercase; }
.profile-stats dd { margin: 3px 0 0; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.profile-stats a:hover { color: var(--gold-light); }

.objective-card, .dispatch { margin: 0 14px 16px; padding: 15px; border: 1px solid rgba(191,157,76,0.5); background: linear-gradient(135deg, rgba(87,100,66,0.5), rgba(17,28,30,0.84)); box-shadow: inset 0 0 14px rgba(0,0,0,0.4); }
.objective-card h2, .dispatch h2 { margin: 3px 0 8px; font-size: 20px; font-weight: normal; color: #f6e8be; }
.objective-card p, .dispatch p { margin: 0; color: #c8c5b3; font-size: 13px; line-height: 1.55; }
.traits { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 14px 17px; }
.traits span, .skill-grid span { padding: 5px 8px; font: 10px Arial, sans-serif; color: #d8d6c4; border: 1px solid #63715e; background: #27352f; }

.chronicle-panel { min-height: 740px; }
.panel-tabs { display: flex; padding: 8px 10px 0; background: #101b1f; border-bottom: 1px solid #75602e; }
.panel-tabs span { padding: 8px 20px; color: #7f8e89; font-size: 12px; border: 1px solid #34433d; border-bottom: 0; }
.panel-tabs .active { color: #f2e9cf; border-color: #8d7137; background: #293934; }
.chronicle-section { padding: 26px 26px 4px; scroll-margin-top: 100px; }
.chronicle-section.experience { padding-bottom: 28px; }
.section-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.section-heading h2 { margin: 2px 0 0; color: #f5e7bb; font-size: 28px; font-weight: normal; }
.medallion { width: 38px; height: 38px; display: grid; place-items: center; color: #f4d77e; border: 3px double #a98743; border-radius: 50%; background: #273c35; }

.record-card { position: relative; display: grid; grid-template-columns: 98px 1fr; margin: 0 0 14px; border: 1px solid #4b554e; background: linear-gradient(90deg, rgba(34,46,43,0.95), rgba(17,27,29,0.93)); }
.record-card::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(255,255,255,0.035); pointer-events: none; }
.record-card.current { border-color: #88723f; }
.year { display: grid; place-items: center; padding: 14px 9px; text-align: center; color: #ead69c; font-size: 12px; border-right: 1px solid #4e5c52; background: rgba(74,89,61,0.44); }
.record-body { position: relative; padding: 17px 18px 18px; }
.record-body h3 { margin: 4px 0 3px; color: #fff7dc; font-size: 20px; font-weight: normal; }
.record-body p { color: #c6c2b1; font-size: 13px; line-height: 1.5; }
.institution { margin: 0 0 6px; color: #d3bd7f !important; }
.program { margin: 0 0 10px; font-style: italic; }
.record-body ul { margin: 9px 0 0; padding: 0; list-style: none; }
.record-body li { position: relative; margin: 7px 0; padding-left: 17px; color: #c6c2b1; font-size: 13px; line-height: 1.45; }
.record-body li::before { content: "◆"; position: absolute; left: 0; top: 1px; color: #9fae72; font-size: 8px; }
.status { color: #9eb57c; font: 9px Arial, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; }
.status.completed { color: #9eb8c3; }

.ledger-section { border-bottom: 1px solid rgba(181,151,76,0.28); }
.ledger-heading { display: flex; justify-content: space-between; padding: 6px 12px; color: #eae2c8; font-size: 12px; background: linear-gradient(#24353c, #17252a); border-bottom: 1px solid #4f5b57; }
.ledger-heading strong { color: var(--gold-light); }
.language { padding: 10px 13px; }
.language > div:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.language strong { font-size: 13px; }
.language span { color: #a9ad9d; font-size: 11px; }
.meter { height: 7px; margin-top: 6px; padding: 1px; border: 1px solid #5f5538; background: #101819; }
.meter span { display: block; height: 100%; background: linear-gradient(90deg, #526b3c, #9cb36c); box-shadow: 0 0 5px rgba(151,177,105,0.35); }
.skill-list { margin: 0; padding: 8px 12px 11px; list-style: none; }
.skill-list li { display: flex; gap: 8px; padding: 6px 3px; color: #c8c5b6; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,0.035); }
.skill-list li span { color: #a3b579; }
.skill-grid { display: flex; flex-wrap: wrap; gap: 6px; padding: 13px; }
.dispatch { margin-top: 15px; }
.primary-button { display: block; margin-top: 13px; padding: 10px; text-align: center; text-decoration: none; color: #fff3ce; font-size: 12px; border: 1px solid #c09c51; background: linear-gradient(#8f3d32, #5e211e); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.06), 0 3px 6px rgba(0,0,0,0.4); }
.primary-button:hover, .primary-button:focus-visible { filter: brightness(1.18); outline: 2px solid #f3d485; outline-offset: 2px; }

.footer-bar { position: relative; z-index: 5; width: min(1100px, 92%); margin: 18px auto 0; display: flex; justify-content: space-between; padding: 8px 15px; color: #bfbba8; font-size: 11px; border: 1px solid #89713e; background: rgba(13,24,27,0.92); }

@media (max-width: 1100px) {
  .interface-grid { grid-template-columns: 260px 1fr; }
  .ledger-panel { position: static; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; }
  .ledger-panel .panel-title { grid-column: 1 / -1; }
  .ledger-panel .dispatch { align-self: stretch; }
  .resources .resource:nth-child(-n+2) { display: none; }
}

@media (max-width: 760px) {
  .world-map { padding: 78px 10px 30px; }
  .topbar { min-height: 64px; padding: 7px 10px; }
  .small-seal { width: 42px; }
  .realm-title { min-width: 0; flex: 1; }
  .realm-title strong { font-size: 13px; }
  .resources, .date-plate { display: none; }
  .nav-ribbon { overflow-x: auto; justify-content: flex-start; }
  .nav-ribbon a { min-width: 110px; }
  .interface-grid { grid-template-columns: 1fr; }
  .profile-panel { position: static; }
  .chronicle-panel { grid-row: 2; }
  .ledger-panel { grid-column: 1; grid-template-columns: 1fr; }
  .ledger-panel .panel-title { grid-column: 1; }
  .chronicle-section { padding: 22px 14px 4px; }
  .record-card { grid-template-columns: 1fr; }
  .year { display: block; text-align: left; padding: 7px 17px; border-right: 0; border-bottom: 1px solid #4e5c52; }
  .panel-tabs span { flex: 1; padding-inline: 7px; text-align: center; }
  .footer-bar { flex-direction: column; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }