@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;600;700;800;900&display=swap');
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Root colors ─── */
:root {
  --sky1: #5BC8F5;
  --sky2: #3AAFDE;
  --orange: #FF8C00;
  --orange2: #E67600;
  --yellow: #FFD700;
  --green: #5CB85C;
  --green2: #43A543;
  --red: #FF6B6B;
  --purple: #A855F7;
  --brown: #6B3D1E;
  --white: #FFFFFF;
  --cream: #FFF8E7;
  --text-dark: #3D2B1F;
}

html, body { font-size: 16px; }

.g2i-body {
  font-family: 'Kanit', sans-serif;
  /* Sky gradient → city area → road */
  background: linear-gradient(180deg,
    #5BC8F5 0%,
    #87CEEB 45%,
    #A0D8EF 55%,
    #5CB85C 55%,
    #43A543 65%,
    #6B6B6B 65%,
    #555555 100%
  );
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* ─────────────────────────────
   SUN
───────────────────────────── */
.g2i-sun {
  position: fixed;
  top: 16px; right: 20px;
  font-size: clamp(2.2rem, 6vw, 3rem);
  z-index: 1;
  animation: g2iSunSpin 12s linear infinite;
  filter: drop-shadow(0 0 12px rgba(255,220,0,0.7));
}
@keyframes g2iSunSpin { to { transform: rotate(360deg); } }

/* ─────────────────────────────
   CLOUDS
───────────────────────────── */
.g2i-cloud {
  position: fixed;
  z-index: 1;
  pointer-events: none;
  animation: g2iCloud linear infinite;
  opacity: 0.85;
}
.g2i-cloud1 { font-size: 3rem; top: 8%;  animation-duration: 20s; animation-delay: 0s;   left: -100px; }
.g2i-cloud2 { font-size: 2rem; top: 18%; animation-duration: 32s; animation-delay: -12s; left: -80px;  opacity: 0.7; }
.g2i-cloud3 { font-size: 2.5rem; top: 5%; animation-duration: 26s; animation-delay: -6s;  left: -90px; }
@keyframes g2iCloud {
  from { transform: translateX(-120px); }
  to   { transform: translateX(110vw); }
}

/* ─────────────────────────────
   CITY BUILDINGS
───────────────────────────── */
.g2i-city {
  position: fixed;
  bottom: 34%;   /* sits on top of road */
  left: 0; right: 0;
  display: flex;
  align-items: flex-end;
  gap: 0;
  z-index: 1;
  pointer-events: none;
}

.g2i-bld {
  flex-shrink: 0;
  border-radius: 6px 6px 0 0;
}
/* Windows pattern via background */
.g2i-bld::after {
  content: '';
  position: absolute;
  inset: 6px;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 8px,
    rgba(255,235,120,0.55) 8px, rgba(255,235,120,0.55) 13px
  );
  border-radius: 4px;
}
.g2i-bld { position: relative; }

/* Individual buildings */
.g2i-bld1 { width: 14vw; height: clamp(80px,18vw,140px);  background: #4A6FA5; margin-left: 0; }
.g2i-bld2 { width: 10vw; height: clamp(120px,22vw,180px); background: #7B5EA7; }
.g2i-bld3 { width: 16vw; height: clamp(90px,15vw,130px);  background: #3A7CA5; }
.g2i-bld4 { width: 12vw; height: clamp(140px,26vw,210px); background: #5C4A8A; }
.g2i-bld5 { width: 18vw; height: clamp(70px,14vw,115px);  background: #2E86AB; }
.g2i-bld6 { width: 14vw; height: clamp(110px,20vw,160px); background: #6B3D8A; flex: 1; }

/* ─────────────────────────────
   ROAD
───────────────────────────── */
.g2i-road {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 34%;
  background: #555;
  z-index: 1;
  overflow: hidden;
  border-top: 6px solid #FFD700;
}
.g2i-road::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 8px;
  background: #FFD700;
}

/* Moving road dashes */
.g2i-road-line {
  position: absolute;
  top: 50%;
  width: 80px; height: 8px;
  background: #FFF;
  border-radius: 4px;
  animation: g2iRoadLine 1.2s linear infinite;
}
.g2i-road-line:nth-child(1) { left: 15%;  animation-delay: 0s; }
.g2i-road-line:nth-child(2) { left: 48%;  animation-delay: -0.4s; }
.g2i-road-line:nth-child(3) { left: 78%;  animation-delay: -0.8s; }
@keyframes g2iRoadLine {
  from { transform: translateY(-50%) translateX(0);   opacity: 1; }
  to   { transform: translateY(-50%) translateX(120px); opacity: 0; }
}

/* ─────────────────────────────
   MAIN CONTENT WRAPPER
───────────────────────────── */
.g2i-wrap {
  position: relative;
  z-index: 10;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(1.25rem,4vw,2rem) 1rem clamp(4rem,12vw,7rem);
  text-align: center;
  gap: 0;
}

/* ─────────────────────────────
   HERO CHARACTER
───────────────────────────── */
.g2i-hero {
  margin-bottom: 0.35rem;
}
.g2i-char {
  font-size: clamp(4rem, 14vw, 7rem);
  display: inline-block;
  animation: g2iRun 0.45s steps(2) infinite;
  filter: drop-shadow(3px 4px 0 rgba(0,0,0,0.25));
}
@keyframes g2iRun {
  0%   { transform: translateY(0) scaleX(1);  }
  50%  { transform: translateY(-10px) scaleX(1); }
  100% { transform: translateY(0) scaleX(1);  }
}

/* ─────────────────────────────
   TITLE
───────────────────────────── */
.g2i-title {
  font-size: clamp(2.5rem, 10vw, 4.5rem);
  font-weight: 900;
  color: var(--white);
  text-shadow:
    3px  3px  0 var(--brown),
    5px  5px  0 rgba(0,0,0,0.2);
  -webkit-text-stroke: 2px var(--brown);
  letter-spacing: 2px;
  margin-bottom: 0.25rem;
  line-height: 1.05;
}
.g2i-sub {
  font-size: clamp(0.88rem, 2.8vw, 1.05rem);
  color: rgba(255,255,255,0.92);
  font-weight: 700;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
  margin-bottom: 1.25rem;
  letter-spacing: 0.5px;
}

/* ─────────────────────────────
   FORM CARD  (white card like game1)
───────────────────────────── */
.g2i-card {
  background: rgba(255,255,255,0.97);
  border: 4px solid var(--white);
  border-radius: 24px;
  padding: clamp(1.25rem,3.5vw,1.75rem);
  width: min(360px, 92vw);
  box-shadow:
    0 8px 24px rgba(0,0,0,0.2),
    0 0 0 5px var(--orange);
  margin-bottom: 0.85rem;
}
.g2i-card-title {
  font-size: clamp(0.85rem,2.5vw,1rem);
  font-weight: 800;
  color: var(--brown);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Input */
.g2i-field { position: relative; margin-bottom: 1rem; }
.g2i-field-ico {
  position: absolute; left: 1rem; top: 50%;
  transform: translateY(-50%); font-size: 1.1rem;
}
.g2i-input {
  width: 100%;
  padding: clamp(0.8rem,2.5vw,0.95rem) 1rem clamp(0.8rem,2.5vw,0.95rem) 2.9rem;
  background: var(--cream);
  border: 3px solid var(--yellow);
  border-radius: 50px;
  color: var(--text-dark);
  font-family: 'Kanit', sans-serif;
  font-size: clamp(0.92rem,2.5vw,1rem);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.g2i-input::placeholder { color: #BBA97A; }
.g2i-input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(255,140,0,0.2);
}

/* Main button */
.g2i-btn-main {
  width: 100%;
  padding: clamp(0.9rem,2.5vw,1.05rem);
  background: linear-gradient(180deg, #FF9F1C, #FF7800);
  border: none; border-radius: 50px;
  color: var(--white);
  font-family: 'Kanit', sans-serif;
  font-size: clamp(1rem,3vw,1.15rem);
  font-weight: 900;
  cursor: pointer;
  letter-spacing: 1px;
  box-shadow:
    0 5px 0 #C05A00,
    0 8px 16px rgba(255,120,0,0.4);
  transition: transform 0.1s, box-shadow 0.1s;
  -webkit-tap-highlight-color: transparent;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
}
.g2i-btn-main:hover  { transform: translateY(-2px); box-shadow: 0 7px 0 #C05A00, 0 12px 20px rgba(255,120,0,0.45); }
.g2i-btn-main:active { transform: translateY(3px);  box-shadow: 0 2px 0 #C05A00, 0 4px 8px rgba(255,120,0,0.3); }

/* ─────────────────────────────
   NAV BUTTONS
───────────────────────────── */
.g2i-nav {
  display: flex; gap: 0.6rem;
  flex-wrap: wrap; justify-content: center;
  margin-bottom: 1rem;
  width: min(360px, 92vw);
}
.g2i-btn-out {
  flex: 1; min-width: 120px;
  padding: 0.6rem 1rem;
  background: rgba(255,255,255,0.85);
  border: 3px solid rgba(255,255,255,0.9);
  border-radius: 50px;
  color: var(--brown);
  font-family: 'Kanit', sans-serif;
  font-size: clamp(0.8rem,2.5vw,0.9rem);
  font-weight: 700;
  cursor: pointer; text-decoration: none;
  text-align: center;
  box-shadow: 0 4px 0 rgba(0,0,0,0.15), 0 6px 14px rgba(0,0,0,0.1);
  transition: transform 0.1s, box-shadow 0.1s;
}
.g2i-btn-out:hover  { transform: translateY(-2px); background: #fff; }
.g2i-btn-out:active { transform: translateY(2px);  box-shadow: 0 2px 0 rgba(0,0,0,0.15); }

/* ─────────────────────────────
   HOW TO PLAY
───────────────────────────── */
.g2i-how {
  background: rgba(255,255,255,0.92);
  border: 4px solid rgba(255,255,255,0.8);
  border-radius: 20px;
  padding: clamp(1rem,3vw,1.35rem);
  width: min(360px, 92vw);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15), 0 0 0 4px var(--green);
  text-align: left;
}
.g2i-how h3 {
  font-size: clamp(0.85rem,2.5vw,0.95rem);
  font-weight: 800;
  color: var(--brown);
  margin-bottom: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}
.g2i-how-list {
  list-style: none;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.g2i-how-list li {
  display: flex; align-items: center; gap: 0.65rem;
  font-size: clamp(0.82rem,2.5vw,0.92rem);
  color: var(--text-dark);
  font-weight: 600;
  line-height: 1.4;
}
.g2i-dot {
  font-size: 1.2rem; flex-shrink: 0;
}

/* ─────────────────────────────
   RESPONSIVE
───────────────────────────── */
@media (max-width: 360px) {
  .g2i-how { display: none; }
  .g2i-char { font-size: 3.5rem; }
}
@media (min-width: 480px) {
  .g2i-nav .g2i-btn-out { flex: none; padding: 0.65rem 1.4rem; }
}
@media (min-height: 750px) {
  .g2i-wrap { justify-content: center; }
}