@import url('https://googleapis.com');

:root { 
  --ink: #142e4a; 
  --muted: #708094; 
  --paper: #f7f9fd; 
  --line: #dfe7f1; 
  --mint: #a9d8ff; 
  --deep-mint: #2568ab; 
  --coral: #ff836b; 
  --sun: #fedc75; 
  --fog: #dce9f5; 
  --fog-dark: #b9d0e7; 
  --navy: #112f50; 
}

* { 
  box-sizing: border-box; 
}

body { 
  margin: 0; 
  min-width: 320px; 
  background: var(--paper); 
  color: var(--ink); 
  font-family: Manrope, Arial, sans-serif; 
}

button, input { 
  font: inherit; 
}

button { 
  cursor: pointer; 
}

/* Two-column layout matching original high-fidelity design specifications */
.app-shell { 
  min-height: 100vh; 
  display: grid; 
  grid-template-columns: minmax(430px, 45vw) 1fr; 
}

/* Forces map frame view containers to scale reliably inside modern layouts */
.map-panel { 
  min-height: 100vh; 
  position: sticky; 
  top: 0; 
  background: #d9e8f5; 
}

.live-map { 
  position: absolute; 
  inset: 0; 
  z-index: 0; 
  width: 100%;
  height: 100%;
}

.map-topbar, .content-header { 
  position: relative; 
  z-index: 3; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
}

.map-topbar { 
  padding: 28px 30px; 
}

.brand { 
  color: var(--navy); 
  font: 700 22px Fraunces, serif; 
  text-decoration: none; 
  letter-spacing: -.04em; 
  display: flex; 
  align-items: center; 
  gap: 7px; 
}

.brand-mark { 
  display: grid; 
  place-items: center; 
  width: 24px; 
  height: 24px; 
  border-radius: 50% 50% 45% 50%; 
  background: var(--navy); 
  color: var(--mint); 
  font: 600 15px Fraunces, serif; 
}

.icon-button { 
  width: 38px; 
  height: 38px; 
  border-radius: 50%; 
  border: 2px solid rgba(16,54,54,.35); 
  background: #f5c76a; 
  color: #153434; 
  font-size: 12px; 
  font-weight: 800; 
}

/* Interactive control blocks placement coordinates adjustments */
.map-controls { 
  position: absolute; 
  z-index: 3; 
  right: 24px; 
  top: 50%; 
  transform: translateY(-50%);
  display: grid; 
  gap: 9px; 
}

.map-control { 
  border: 0; 
  width: 42px; 
  height: 42px; 
  border-radius: 13px; 
  background: rgba(248,247,242,.92); 
  color: var(--navy); 
  font-size: 20px; 
  box-shadow: 0 4px 16px rgba(21,73,60,.12); 
  display: grid;
  place-items: center;
}

.map-summary { 
  position: absolute; 
  z-index: 3; 
  left: 25px; 
  right: 25px; 
  bottom: 25px; 
  border: 1px solid rgba(255,255,255,.6); 
  background: rgba(248,247,242,.88); 
  border-radius: 18px; 
  padding: 16px 17px; 
  box-shadow: 0 10px 30px rgba(15,64,54,.12); 
  backdrop-filter: blur(8px); 
}

.eyebrow { 
  margin: 0 0 5px; 
  color: #6e8278; 
  font: 500 10px "DM Mono", monospace; 
  letter-spacing: .1em; 
  text-transform: uppercase;
}

.territory-title { 
  margin: 0 0 13px; 
  font: 600 17px Fraunces, serif; 
}

.progress-row { 
  display: flex; 
  justify-content: space-between; 
  font-size: 11px; 
  color: #667874; 
  margin-bottom: 8px; 
}

.progress-track { 
  height: 6px; 
  background: #e4ece5; 
  border-radius: 999px; 
  overflow: hidden; 
  position: relative;
}

.progress-track span { 
  display: block; 
  height: 100%; 
  width: 18%; 
  border-radius: inherit; 
  background: var(--deep-mint); 
  transition: width .5s ease; 
}

/* User metrics visual cards blocks settings */
.content-panel { 
  padding: 45px clamp(28px, 5vw, 75px) 52px; 
  max-width: 940px; 
  width: 100%; 
  margin: auto; 
}

.content-header { 
  gap: 20px; 
}

.content-header h1 { 
  font: 600 clamp(33px, 4vw, 50px)/1.04 Fraunces, serif; 
  letter-spacing: -.045em; 
  margin: 0; 
}

.status-pill { 
  flex: none; 
  display: flex; 
  gap: 8px; 
  align-items: center; 
  color: #2568ab; 
  background: #dceeff; 
  border: 0; 
  border-radius: 999px; 
  padding: 10px 13px; 
  font-size: 11px; 
  font-weight: 700; 
}

.status-pill i { 
  width: 7px; 
  height: 7px; 
  border-radius: 50%; 
  background: #347bc2; 
}

.status-pill.live i { 
  background: #347bc2; 
  box-shadow: 0 0 0 4px rgba(52,123,194,.15); 
}

.stat-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 12px; 
  margin: 38px 0 42px; 
}

.stat-card { 
  display: flex; 
  align-items: center; 
  gap: 11px; 
  border: 1px solid var(--line); 
  background: #fffefa; 
  border-radius: 15px; 
  padding: 15px 13px; 
}

.streak-card { 
  background: #173d68; 
  color: #fff; 
  border-color: #173d68; 
}

.stat-icon { 
  display: grid; 
  place-items: center; 
  width: 30px; 
  height: 30px; 
  border-radius: 10px; 
  color: #e4fff5; 
  background: #2b5f94; 
  font-size: 17px; 
}

.stat-icon.mint { 
  background: #deefff; 
  color: #2a69aa; 
}

.stat-icon.coral { 
  background: #ffe2d9; 
  color: #dc6755; 
}

.stat-value { 
  margin: 0; 
  font-weight: 800; 
  font-size: 17px; 
  white-space: nowrap; 
}

.stat-label { 
  margin: 1px 0 0; 
  color: #73817b; 
  font-size: 10px; 
  white-space: nowrap; 
}

.streak-card .stat-label { 
  color: #b3ccc1; 
}

.section-block { 
  border-top: 1px solid var(--line); 
  padding: 29px 0; 
}

.section-heading { 
  display: flex; 
  align-items: end; 
  justify-content: space-between; 
  gap: 14px; 
  margin-bottom: 16px; 
}

.section-heading h2 { 
  font: 600 23px Fraunces, serif; 
  letter-spacing: -.035em; 
  margin: 0; 
}

.text-button { 
  border: 0; 
  background: transparent; 
  color: #2568ab; 
  font-size: 11px; 
  font-weight: 800; 
  padding: 4px 0; 
}

.next-unlock-card { 
  display: flex; 
  align-items: center; 
  gap: 17px; 
  padding: 17px; 
  border-radius: 16px; 
  background: #e4f0fb; 
}

.mini-hex { 
  width: 45px; 
  height: 45px; 
  border-radius: 10px; 
  display: grid; 
  place-items: center; 
  flex: none; 
  color: #173d68; 
  font-size: 18px; 
  background: #9bdaff; 
}

.unlock-copy { 
  flex: 1; 
}

.unlock-copy h3 { 
  margin: 0 0 3px; 
  font: 600 18px Fraunces, serif; 
}

.unlock-copy p { 
  margin: 0 0 9px; 
  color: #5d736b; 
  font-size: 11px; 
  line-height: 1.45; 
}

.dark { 
  background: #cbdcec; 
}

.dark span { 
  background: #9bdaff; 
}

.arrow-button { 
  width: 33px; 
  height: 33px; 
  border: 0; 
  border-radius: 50%; 
  background: var(--navy); 
  color: white; 
  font-size: 21px; 
  display: grid;
  place-items: center;
}

.activity-choices { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 10px; 
}

.activity-choice { 
  padding: 14px 11px; 
  text-align: left; 
  border: 1px solid var(--line); 
  border-radius: 14px; 
  background: white; 
  color: var(--ink); 
  transition: transform .2s, border-color .2s, box-shadow .2s; 
}

.activity-choice:hover { 
  transform: translateY(-2px); 
  border-color: #a8caea; 
  box-shadow: 0 6px 15px rgba(30,80,69,.08); 
}

.activity-choice b { 
  display: block; 
  font-size: 11px; 
  line-height: 1.25; 
}

.activity-choice small { 
  display: block; 
  font-size: 9px; 
  color: #81908a; 
  line-height: 1.4; 
  margin-top: 3px; 
}

.choice-icon { 
  display: grid; 
  place-items: center; 
  width: 28px; 
  height: 28px; 
  border-radius: 9px; 
  margin-bottom: 10px; 
  background: #e2effb; 
  color: #2a69aa; 
  font-weight: 800; 
}

.leaderboard { 
  margin: 0; 
  padding: 0; 
  list-style: none; 
  display: grid; 
  gap: 3px; 
}

.leaderboard li { 
  display: grid; 
  grid-template-columns: 21px 27px 1fr auto; 
  align-items: center; 
  gap: 9px; 
  padding: 8px; 
  border-radius: 10px; 
  font-size: 11px; 
}

.leaderboard li.you { 
  background: #e3f0fb; 
}

.rank { 
  color: #82908a; 
  font: 500 10px "DM Mono", monospace; 
}

.avatar { 
  width: 25px; 
  height: 25px; 
  display: grid; 
  place-items: center; 
  border-radius: 50%; 
  font-size: 10px; 
  font-weight: 800; 
  color: #fff; 
}

.violet { background: #6e66a9; }
.gold { background: #cd9f42; }
.user { background: #2a69aa; }
.person { font-weight: 700; }
.person small { display: inline; margin-left: 5px; color: #82908a; font-size: 9px; font-weight: 500; }
.leaderboard li b { font: 700 12px "DM Mono", monospace; }

/* Modal and feedback layer configurations */
.dialog { 
  border: 0; 
  padding: 0; 
  background: transparent; 
  max-width: 510px; 
  width: calc(100% - 32px); 
}

.dialog::backdrop { 
  background: rgba(12, 38, 70, .48); 
  backdrop-filter: blur(3px); 
}

.dialog-card { 
  position: relative; 
  background: #fbfaf5; 
  border-radius: 24px; 
  padding: 31px; 
  box-shadow: 0 20px 80px rgba(0,0,0,.25); 
}

.dialog-card h2 { 
  font: 600 32px Fraunces, serif; 
  letter-spacing: -.04em; 
  margin: 0 0 6px; 
}

.dialog-copy { 
  color: #687b90; 
  font-size: 13px; 
  line-height: 1.5; 
  margin: 0 0 23px; 
}

.dialog-close { 
  position: absolute; 
  right: 15px; 
  top: 13px; 
  border: 0; 
  background: transparent; 
  font-size: 25px; 
  color: #6e8499; 
}

.field-label { 
  display: block; 
  font-size: 12px; 
  font-weight: 800; 
  margin: 16px 0 8px; 
}

.field-label small { 
  font-weight: 500; 
  color: #84908a; 
}

.field-label input { 
  display: block; 
  width: 100%; 
  border: 1px solid #d8e3ee; 
  background: white; 
  border-radius: 10px; 
  padding: 12px; 
  margin-top: 7px; 
  outline-color: #4c8fcf; 
}

.category-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 8px; 
}

.category { 
  border: 1px solid #dde6f0; 
  background: white; 
  border-radius: 9px; 
  padding: 10px 5px; 
  color: #60758b; 
  font-size: 10px; 
  font-weight: 700; 
}

.category.selected { 
  border-color: #397fc3; 
  background: #e0effd; 
  color: #2568ab; 
}

.primary-button { 
  margin-top: 24px; 
  width: 100%; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  border: 0; 
  border-radius: 12px; 
  padding: 14px 16px; 
  background: #173668; 
  color: white; 
  font-weight: 800; 
  font-size: 12px; 
}

.toast { 
  position: fixed; 
  z-index: 10; 
  left: 50%; 
  bottom: 25px; 
  transform: translate(-50%, 130px); 
  opacity: 0; 
  transition: .35s;
  background: #173668;
  color: white;
  padding: 12px 17px;
  border-radius: 999px;
  box-shadow: 0 12px 25px rgba(0,0,0,.2);
  font-size: 12px;font-weight: 700;white-space: nowrap;
}
.toast.visible {transform: translate(-50%, 0);opacity: 1;
}
/* Responsiveness overrides rules */
@media (max-width: 840px) 
{.app-shell 
    { 
        display: block;
    }
 .map-panel 
 { 
    position: relative; 
    min-height: 50vh; 
    height: 500px; 
}
.content-panel
 { padding: 32px 22px 44px; }
}