:root {
  --ink: #12304a;
  --muted: #58758a;
  --sky: #84cef2;
  --cyan: #20bce8;
  --cyan-light: #72dcf4;
  --cyan-dark: #0879ad;
  --blue: #0d5787;
  --blue-deep: #083e64;
  --green: #3fd27d;
  --green-dark: #158d55;
  --cream: #fff7d5;
  --paper: #f7fcf6;
  --line: #b8dfea;
  --danger: #ed4262;
  --danger-dark: #a91e42;
  --panel-shadow: 0 8px 0 #07334f, 0 20px 45px rgba(3, 45, 70, .24);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif;
  line-height: 1.5;
}
button, input { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.site-backdrop {
  position: absolute;
  inset: 0 0 auto;
  height: 770px;
  z-index: -2;
  overflow: hidden;
  background-color: #1a7d61;
  background-image: url("/static/game/bg-sky.png");
  background-repeat: repeat-x;
  background-position: center -100px;
  background-size: 304px 560px;
  image-rendering: pixelated;
}
.backdrop-layer {
  position: absolute;
  inset: 100px 0 auto;
  height: 560px;
  background-repeat: repeat-x;
  background-position: center top;
  background-size: 304px 560px;
  image-rendering: pixelated;
  will-change: background-position;
  animation: parallax-left linear infinite;
}
.backdrop-mountains { background-image: url("/static/game/bg-mountains.png"); animation-duration: 190s; }
.backdrop-trees-far { background-image: url("/static/game/bg-trees-far.png"); animation-duration: 145s; }
.backdrop-trees-near { background-image: url("/static/game/bg-trees-near.png"); animation-duration: 112s; }
.backdrop-bushes-far { background-image: url("/static/game/bg-bushes-far.png"); animation-duration: 82s; }
.backdrop-bushes-near { background-image: url("/static/game/bg-bushes-near.png"); animation-duration: 62s; }
.terrain-canvas {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 10;
  width: auto;
  height: 192px;
  max-width: none;
  image-rendering: pixelated;
  will-change: transform;
  animation: terrain-drift 240s linear infinite;
}

@keyframes parallax-left {
  from { background-position: 0 top; }
  to { background-position: -304px top; }
}

@keyframes terrain-drift {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--terrain-loop-width, 2048px))); }
}

.site-header {
  width: min(1180px, calc(100% - 40px));
  min-height: 92px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.brand .brand-wordmark {
  width: 210px;
  height: auto;
  display: block;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 0 rgba(9, 78, 103, .45));
}
nav { display: flex; align-items: center; gap: 28px; }
nav a { color: white; text-decoration: none; font-weight: 900; text-shadow: 0 2px 0 #3189ad; }

.nav-button, .primary-button, .secondary-button, .danger-button {
  border: 3px solid rgba(255,255,255,.82);
  border-radius: 11px;
  padding: 11px 20px;
  color: white;
  font-weight: 900;
  letter-spacing: .02em;
  text-shadow: 0 2px 0 rgba(0,0,0,.22);
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.nav-button:hover, .primary-button:hover, .secondary-button:hover, .danger-button:hover { transform: translateY(-2px); filter: brightness(1.05); }
.nav-button:active, .primary-button:active, .secondary-button:active, .danger-button:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--cyan-dark); }
button:focus-visible, input:focus-visible { outline: 4px solid #ffe363; outline-offset: 3px; }
button:disabled { cursor: wait; opacity: .65; transform: none !important; }
.nav-button { background: var(--cyan); box-shadow: 0 5px 0 var(--cyan-dark); }
.primary-button { background: var(--green); box-shadow: 0 6px 0 var(--green-dark); }
.secondary-button { background: var(--cyan); box-shadow: 0 5px 0 var(--cyan-dark); }
.danger-button { background: var(--danger); box-shadow: 0 5px 0 var(--danger-dark); }
.wide { width: 100%; margin-top: 8px; }

.hero {
  width: min(1180px, calc(100% - 40px));
  min-height: 620px;
  margin: 8px auto 0;
  display: grid;
  grid-template-columns: 1fr .94fr;
  align-items: center;
  gap: clamp(35px, 6vw, 85px);
  padding-bottom: 70px;
}
.eyebrow { margin: 0 0 10px; color: var(--cyan-dark); font-size: .76rem; font-weight: 900; letter-spacing: .18em; }
.hero .eyebrow { color: #0b668f; }
.hero h1 {
  margin: 0;
  color: white;
  font-size: clamp(3.5rem, 7vw, 6rem);
  line-height: .9;
  letter-spacing: -.06em;
  text-shadow: 0 6px 0 #258eb8, 3px 0 0 #258eb8, -3px 0 0 #258eb8;
}
.hero h1 span { color: #ffeb73; text-shadow: 0 6px 0 #c98a20, 3px 0 0 #c98a20, -3px 0 0 #c98a20; }
.hero-text { max-width: 610px; margin: 28px 0; color: #16485e; font-size: 1.14rem; font-weight: 800; }
.hero-actions { display: flex; align-items: center; gap: 22px; }
.platform-note { color: #245f78; font-size: .82rem; font-weight: 900; }

.world-card {
  position: relative;
  aspect-ratio: 30 / 17;
  overflow: hidden;
  border: 6px solid white;
  border-radius: 19px;
  background: #0b3f61;
  box-shadow: 0 0 0 5px #168db9, var(--panel-shadow);
  image-rendering: pixelated;
}
.featured-world-image { width: 100%; height: 100%; display: block; object-fit: cover; image-rendering: pixelated; }
.snapshot-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #dff9ff;
  text-align: center;
  background:
    linear-gradient(rgba(5,49,75,.2), rgba(5,49,75,.72)),
    url("/static/game/bg-sky.png") repeat-x center bottom / auto 100%;
}
.snapshot-placeholder img { width: 54px; height: 54px; image-rendering: pixelated; filter: drop-shadow(0 4px 0 rgba(0,0,0,.3)); }
.snapshot-placeholder strong { color: white; font-size: 1rem; }
.snapshot-placeholder small { color: #a9dce9; font-size: .72rem; }
.world-label {
  position: absolute;
  z-index: 15;
  left: 18px;
  top: 18px;
  padding: 8px 12px;
  color: white;
  background: rgba(6,44,67,.88);
  border: 3px solid #70dcf4;
  border-radius: 8px;
  box-shadow: 0 4px 0 #062f4a;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
}
.world-label span { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: #56e68f; box-shadow: 0 0 8px #56e68f; }
.world-label strong { color: #ffec78; }
.world-visits {
  position: absolute;
  z-index: 15;
  right: 14px;
  bottom: 14px;
  padding: 6px 10px;
  color: #dff9ff;
  background: rgba(6,44,67,.88);
  border: 2px solid rgba(112,220,244,.82);
  border-radius: 7px;
  box-shadow: 0 3px 0 #062f4a;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .06em;
}

.feature-strip {
  width: min(1060px, calc(100% - 40px));
  margin: -10px auto 95px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  color: white;
  background: var(--blue);
  border: 4px solid #61d4ef;
  border-radius: 15px;
  box-shadow: 0 7px 0 var(--blue-deep), 0 18px 35px rgba(9,73,105,.18);
}
.feature-strip article { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 98px; padding: 18px; border-right: 2px solid rgba(130,221,241,.28); }
.feature-strip article:last-child { border: 0; }
.feature-icon { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; background: #073f64; border: 2px solid #50c9e7; border-radius: 10px; box-shadow: inset 0 -5px 0 rgba(0,0,0,.16); image-rendering: pixelated; }
.feature-icon img { width: 38px; height: 38px; object-fit: contain; image-rendering: pixelated; }
.feature-icon .gem-icon { width: 30px; height: 30px; }
.sprite { display: inline-block; background-repeat: no-repeat; image-rendering: pixelated; }
.sprite-vending { width: 38px; height: 38px; background: url("/static/game/vending-sheet.png") left top / 152px 38px no-repeat; }
.sprite-lock { width: 26px; height: 26px; flex: 0 0 auto; background: url("/static/game/lock-sheet.png") left top / 104px 26px no-repeat; }
.feature-strip strong, .feature-strip small { display: block; }
.feature-strip strong { color: #ffeb76; font-size: .82rem; letter-spacing: .08em; }
.feature-strip small { color: #d8f7ff; white-space: nowrap; }

.account-section { position: relative; padding: 90px 20px 120px; background: linear-gradient(180deg, #e9faf5, #d9f3ed); border-top: 3px solid #b5e7dc; }
.account-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .17; background-image: linear-gradient(45deg, #49bca0 25%, transparent 25%), linear-gradient(-45deg, #49bca0 25%, transparent 25%); background-size: 32px 32px; background-position: 0 0, 0 16px; mask-image: linear-gradient(to bottom, transparent, black 24%, transparent); }
.section-heading { position: relative; max-width: 680px; margin: 0 auto 40px; text-align: center; }
.section-heading h2 { margin: 0 0 12px; font-size: clamp(2.1rem, 5vw, 3.5rem); line-height: 1.05; }
.section-heading > p:last-child { color: var(--muted); font-size: 1.05rem; }
.account-shell { position: relative; width: min(920px, 100%); margin: 0 auto; }
.login-panel, .dashboard { padding: clamp(25px, 5vw, 52px); color: white; background: linear-gradient(145deg, #0e5c8b, #0a496f); border: 4px solid #5fd7f1; border-radius: 17px; box-shadow: var(--panel-shadow); }
.login-panel { max-width: 560px; margin: 0 auto; }
.panel-heading, .dashboard-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.panel-heading { justify-content: flex-start; }
.panel-heading h3, .dashboard-header h3 { margin: 0; font-size: 1.75rem; }
.panel-heading p, .dashboard-header p { margin: 3px 0 0; color: #c9edf7; }
.dashboard-header .eyebrow { color: #67dafa; }
.panel-badge { width: 62px; height: 62px; display: grid; place-items: center; flex: 0 0 auto; background: #073c5e; border: 3px solid #64d9f2; border-radius: 12px; box-shadow: inset 0 -7px 0 rgba(0,0,0,.22); }
.panel-badge img { width: 46px; height: 46px; object-fit: contain; image-rendering: pixelated; }
.panel-badge.app-badge img { border-radius: 8px; }
form label { display: block; margin: 15px 0 6px; color: #e4f8fd; font-size: .8rem; font-weight: 900; letter-spacing: .05em; }
input { width: 100%; min-height: 50px; padding: 10px 13px; color: var(--ink); background: #f5fbfb; border: 3px solid #9db5c4; border-radius: 9px; outline: none; box-shadow: inset 0 4px 0 rgba(11,61,84,.1); }
input:focus { border-color: #ffe05b; box-shadow: 0 0 0 4px rgba(255,224,91,.2), inset 0 4px 0 rgba(11,61,84,.08); }
.security-note { display: flex; align-items: center; gap: 10px; margin: 24px 0 0; padding: 14px; color: #d9f7ef; background: rgba(4,47,70,.52); border: 2px solid rgba(95,215,241,.35); border-radius: 9px; font-size: .78rem; }
.form-message { min-height: 22px; margin: 15px 0 0; font-size: .86rem; font-weight: 900; }
.form-message.error { color: #ff9aae; }
.form-message.success { color: #76f4a9; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; }
.stats-grid article { min-width: 0; padding: 15px; display: flex; align-items: center; gap: 10px; background: rgba(4,52,79,.72); border: 2px solid #53c9e4; border-radius: 11px; box-shadow: inset 0 -5px 0 rgba(0,0,0,.12); }
.stats-grid img { width: 34px; height: 34px; flex: 0 0 auto; object-fit: contain; image-rendering: pixelated; }
.stats-grid .stat-gem { width: 25px; height: 25px; margin: 4px; }
.stats-grid div { min-width: 0; }
.stats-grid small, .stats-grid strong { display: block; }
.stats-grid small { color: #9fe7f6; font-size: .64rem; font-weight: 900; letter-spacing: .08em; }
.stats-grid strong { overflow: hidden; margin-top: 4px; color: white; font-size: 1.25rem; text-overflow: ellipsis; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.settings-card { padding: 24px; border: 2px solid #55cbe5; border-radius: 12px; background: rgba(4,52,79,.66); }
.settings-card h4 { margin: 0; color: white; font-size: 1.2rem; }
.settings-card > div p { margin: 3px 0 16px; color: #bceaf4; font-size: .8rem; }
.settings-card button { width: 100%; margin-top: 18px; }

footer { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 max(20px, calc((100% - 1180px) / 2)); color: #9bc3d1; background: #082c42; border-top: 5px solid #0f6b93; font-size: .78rem; }

@media (max-width: 850px) {
  .site-backdrop { height: 1120px; }
  nav a { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 55px; text-align: center; }
  .hero-copy { display: flex; flex-direction: column; align-items: center; }
  .world-card { width: min(520px, 100%); margin: 0 auto; }
  .feature-strip { grid-template-columns: 1fr 1fr; margin-top: 50px; }
  .feature-strip article:nth-child(2) { border-right: 0; }
  .feature-strip article:nth-child(-n+2) { border-bottom: 2px solid rgba(130,221,241,.28); }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .site-header { width: calc(100% - 24px); }
  .brand .brand-wordmark { width: 150px; }
  .nav-button { padding: 9px 12px; }
  .hero { width: calc(100% - 24px); }
  .hero h1 { font-size: clamp(3rem, 17vw, 4.4rem); }
  .hero-actions { flex-direction: column; }
  .feature-strip { width: calc(100% - 24px); grid-template-columns: 1fr; }
  .feature-strip article { border-right: 0; border-bottom: 2px solid rgba(130,221,241,.28); }
  .feature-strip article:nth-child(3) { border-bottom: 2px solid rgba(130,221,241,.28); }
  .stats-grid { grid-template-columns: 1fr; }
  .dashboard-header { align-items: flex-start; }
  footer { flex-direction: column; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .backdrop-layer, .terrain-canvas { animation: none !important; transform: none !important; }
}