/* ===========================================================================
   GeoSol — global styles
   Font: Pixelify Sans for headings/labels/buttons/badges/HUD.
   Base body font: system sans-serif.
   No border-radius anywhere.
   =========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600;700&display=swap");

:root {
  --pixel: "Pixelify Sans", "Courier New", monospace;
  --sky: rgb(135, 206, 235);
  --green: rgb(90, 172, 39);
  --green-border: rgb(61, 122, 25);
  --green-dark: rgb(15, 31, 8);
  --panel: rgb(29, 29, 29);
  --panel-border: rgb(85, 85, 85);
  --muted: rgb(170, 170, 170);
  --faint: rgb(68, 68, 68);
  --red: rgb(204, 51, 51);
  --orange: rgb(252, 175, 61);
}

* {
  box-sizing: border-box;
  border-radius: 0 !important;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  background-color: var(--sky);
  color: rgb(255, 255, 255);
  -webkit-font-smoothing: antialiased;
}

.pixel {
  font-family: var(--pixel);
}

button {
  cursor: pointer;
  font-family: var(--pixel);
}

input {
  font-family: var(--pixel);
}

.hidden {
  display: none !important;
}

/* ===========================================================================
   LANDING PAGE
   =========================================================================== */

#landing {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("/bg.png");
  background-size: cover;
  background-position: center;
  background-color: var(--sky);
  padding: 24px;
  overflow: auto;
}

.card {
  position: relative;
  background: var(--panel);
  border: 4px solid var(--panel-border);
  padding: 40px 36px;
  width: 472px;
  max-width: 100%;
}

/* Logo + token badge row */
.badge-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.brand-logo {
  width: 28px;
  height: 28px;
  image-rendering: pixelated; /* keep the pixel art crisp when scaled */
  display: block;
}

.token-badge {
  display: inline-block;
  background: var(--green-dark);
  color: var(--green);
  border: 2px solid var(--green-border);
  padding: 4px 12px;
  font-family: var(--pixel);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  white-space: nowrap;
}

.on-solana {
  color: rgb(255, 255, 255);
  font-family: var(--pixel);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

h1.title {
  font-family: var(--pixel);
  font-size: 26px;
  color: rgb(255, 255, 255);
  letter-spacing: 1.04px;
  text-align: center;
  margin: 0 0 14px;
  font-weight: 600;
}

.subtitle {
  text-align: center;
  color: rgb(255, 255, 255);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 18px;
}

.subtitle strong {
  font-weight: 700;
}

.subtitle .geo {
  color: var(--green);
}

/* Countdown */
.countdown-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 4px;
}

.countdown-label {
  color: var(--muted);
  font-family: var(--pixel);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.countdown-badge {
  background: rgb(10, 26, 5);
  color: var(--green);
  border: 1px solid rgb(42, 80, 16);
  padding: 3px 10px;
  font-family: var(--pixel);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.divider {
  border: none;
  border-top: 1px solid rgb(51, 51, 51);
  width: 100%;
  margin: 20px 0;
}

/* Contract address (click to copy) */
.ca-box {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 8px 10px;
  background: rgb(10, 26, 5);
  border: 1px solid rgb(42, 80, 16);
  color: var(--green);
  font-family: var(--pixel);
  text-align: left;
}

.ca-box:hover {
  border-color: var(--green);
}

.ca-label {
  flex: 0 0 auto;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
}

.ca-value {
  flex: 1 1 auto;
  font-family: "Courier New", monospace;
  font-size: 11px;
  color: rgb(255, 255, 255);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ca-copy {
  flex: 0 0 auto;
  min-width: 64px;
  text-align: center;
  padding: 3px 8px;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  background: var(--green);
  border: 1px solid var(--green-border);
  white-space: nowrap;
}

.ca-box:hover .ca-copy {
  background: rgb(78, 150, 33);
}

/* Form */
.field {
  margin-bottom: 14px;
}

.field-label {
  display: block;
  color: var(--muted);
  font-family: var(--pixel);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 2px;
  margin-bottom: 6px;
}

.field-input {
  width: 100%;
  background: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  border: 3px solid var(--panel-border);
  padding: 12px 14px;
  font-family: var(--pixel);
  font-size: 14px;
  outline: none;
}

.field-input::placeholder {
  color: rgb(110, 110, 110);
}

.field-input:focus {
  border-color: var(--green-border);
}

.play-btn {
  width: 100%;
  height: 50px;
  background: var(--green);
  border: 3px solid var(--green-border);
  color: rgb(255, 255, 255);
  font-family: var(--pixel);
  font-size: 16px;
  margin-top: 4px;
  transition: background 0.12s ease;
}

.play-btn:hover {
  background: rgb(78, 150, 33);
}

/* ===========================================================================
   TAB SECTION + HISTORY LIST (shared by landing + sidebar)
   =========================================================================== */

.tab-bar {
  display: flex;
  align-items: stretch;
  margin-top: 18px;
  border-bottom: 1px solid rgb(42, 42, 42);
}

.tab {
  background: transparent;
  color: var(--faint);
  border: none;
  font-family: var(--pixel);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  padding: 9px 14px;
  border-bottom: 2px solid transparent;
}

.tab.active {
  background: rgb(37, 37, 37);
  color: rgb(255, 255, 255);
  border-bottom: 2px solid var(--green);
}

.tab-note {
  margin-left: auto;
  align-self: center;
  color: var(--faint);
  font-family: var(--pixel);
  font-size: 8px;
  padding-right: 8px;
}

.scroll-list {
  max-height: 200px;
  overflow-y: auto;
  background: transparent;
}

.list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid rgb(42, 42, 42);
}

.list-row:nth-child(odd) {
  background: rgb(29, 29, 29);
}

.list-row:nth-child(even) {
  background: rgb(34, 34, 34);
}

.row-rank {
  color: var(--faint);
  font-size: 9px;
  width: 28px;
  font-family: var(--pixel);
  flex: 0 0 28px;
}

.row-square {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
}

.row-square.win {
  background: var(--green);
}
.row-square.loss {
  background: var(--red);
}
.row-square.border {
  background: var(--orange);
}

.row-distance {
  color: rgb(255, 255, 255);
  font-family: var(--pixel);
  font-size: 13px;
  flex: 1 1 auto;
}

.row-mark {
  font-family: var(--pixel);
  font-size: 13px;
}
.row-mark.win {
  color: var(--green);
}
.row-mark.loss {
  color: var(--red);
}

.list-empty {
  color: var(--faint);
  font-family: var(--pixel);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  padding: 16px 12px;
  text-align: center;
}

/* ===========================================================================
   GAME VIEW
   =========================================================================== */

#game {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* Background layer: Street View */
#streetview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 0;
  background: #0c0c0c;
}

/* Look-left / look-right arrows for the static Street View renderer */
.sv-look {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  gap: 10px;
}
.sv-arrow {
  width: 46px;
  height: 46px;
  background: var(--panel);
  border: 2px solid var(--panel-border);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--pixel);
  font-size: 24px;
  line-height: 1;
}
.sv-arrow:hover {
  background: rgb(45, 45, 45);
}

.sv-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(rgb(120, 180, 210), rgb(150, 200, 160));
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--pixel);
  z-index: 0;
}

/* Top-left HUD */
.hud {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 40;
  display: flex;
  gap: 8px;
}

.hud-btn {
  background: var(--panel);
  border: 2px solid var(--panel-border);
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--pixel);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hud-icon {
  width: 40px;
  height: 36px;
  font-size: 10px;
}

.hud-home {
  height: 36px;
  padding: 0 12px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Left sidebar */
.sidebar {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 30;
  width: 280px;
  height: 100%;
  background: var(--panel);
  border-right: 3px solid var(--panel-border);
  display: flex;
  flex-direction: column;
  padding-top: 56px; /* clear the HUD buttons */
}

.sidebar .scroll-list {
  max-height: none;
  flex: 1 1 auto;
  overflow-y: auto;
}

/* Bottom-right map + place pin */
.map-dock {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 30;
  width: 535px;
  max-width: 100%;
  transform-origin: bottom right;
  transition: transform 0.18s ease;
  overflow: hidden;
}

.map-dock:hover {
  transform: scale(1.12);
}

#minimap {
  width: 535px;
  max-width: 100%;
  height: 230px;
  border: 3px solid var(--panel-border);
  background: rgb(170, 211, 223);
}

.compass {
  position: absolute;
  right: 10px;
  bottom: 64px;
  z-index: 500;
  width: 34px;
  height: 34px;
  border-radius: 50% !important; /* compass is circular */
  background: var(--panel);
  border: 2px solid var(--panel-border);
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pixel);
  font-size: 16px;
}

.place-pin-btn {
  width: 535px;
  max-width: 100%;
  height: 42px;
  background: rgb(85, 85, 85);
  color: rgb(255, 255, 255);
  border: none;
  font-family: var(--pixel);
  font-size: 9.6px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 14px 20px;
  display: block;
}

.place-pin-btn:hover {
  background: rgb(99, 99, 99);
}

.place-pin-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Result toast after a guess */
.result-toast {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  background: var(--panel);
  border: 3px solid var(--panel-border);
  padding: 12px 18px;
  font-family: var(--pixel);
  text-align: center;
  min-width: 240px;
}

.result-toast .rt-dist {
  font-size: 20px;
}
.result-toast.win {
  border-color: var(--green-border);
}
.result-toast.loss {
  border-color: var(--red);
}
.result-toast .rt-verdict.win {
  color: var(--green);
}
.result-toast .rt-verdict.loss {
  color: var(--red);
}
.result-toast .rt-sub {
  color: var(--muted);
  font-size: 11px;
  margin-top: 4px;
}

/* Hide the Google logo / ToS clutter inside the tiny guessing map so it stays
   clean (keep attribution visible on the larger production map if required). */
#minimap a[href^="https://maps.google"],
#minimap .gmnoprint,
#minimap .gm-style-cc {
  display: none !important;
}

/* Responsive: shrink the heavy game widgets on small screens */
@media (max-width: 640px) {
  .sidebar {
    width: 200px;
  }
  .map-dock,
  #minimap,
  .place-pin-btn {
    width: 100%;
  }
  .map-dock:hover {
    transform: none;
  }
}