/* ============================================================
   POCKETDASH STATIC SITE
   ============================================================ */

:root {

  --bg: #101014;
  --bg-soft: #15151a;
  --bg-card: #1a1a20;

  --fg: #f4f4f5;
  --muted: #a0a0aa;
  --subtle: #70707b;

  --border: #2d2d36;
  --border-hover: #41414c;

  --accent: #d8d8df;
  --accent-dark: #bdbdc7;

  --max-width: 1180px;

  --radius: 14px;
}


/* ============================================================
   RESET
   ============================================================ */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  background: var(--bg);
  color: var(--fg);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  -webkit-font-smoothing: antialiased;
}


img {
  display: block;
  max-width: 100%;
}


a {
  color: inherit;
  text-decoration: none;
}


button,
input {
  font: inherit;
}


/* ============================================================
   HEADER
   ============================================================ */

.site-header {

  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  z-index: 100;

  height: 72px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 32px;

  background:
    rgba(16, 16, 20, 0.78);

  border-bottom:
    1px solid rgba(255, 255, 255, 0.04);

  backdrop-filter: blur(16px);
}


.logo {

  font-size: 19px;
  font-weight: 600;

  letter-spacing: -0.03em;

  white-space: nowrap;
}


.logo-pixel {
  color: #ffffff;
}


.nav {

  display: flex;
  align-items: center;

  gap: 28px;

  font-size: 13px;
  color: var(--muted);
}


.nav a {
  transition:
    color 0.15s ease;
}


.nav a:hover {
  color: var(--fg);
}


.nav-button {

  padding: 9px 15px;

  border:
    1px solid rgba(255, 255, 255, 0.12);

  border-radius: 8px;

  color: var(--fg) !important;

  background:
    rgba(255, 255, 255, 0.06);
}


.nav-button:hover {
  background:
    rgba(255, 255, 255, 0.10);
}


.mobile-menu-button {
  display: none;

  border: 0;

  background: transparent;

  color: var(--fg);

  font-size: 22px;

  cursor: pointer;
}


/* ============================================================
   MOBILE MENU
   ============================================================ */

.mobile-menu {

  display: none;

  position: fixed;

  top: 72px;
  left: 0;
  right: 0;

  z-index: 99;

  padding: 20px 24px 26px;

  background:
    rgba(16, 16, 20, 0.97);

  border-bottom:
    1px solid var(--border);
}


.mobile-menu.open {
  display: flex;
  flex-direction: column;

  gap: 18px;
}


.mobile-menu a {
  color: var(--muted);
}


.mobile-menu-button-link {

  padding: 12px;

  border-radius: 8px;

  text-align: center;

  background:
    rgba(255, 255, 255, 0.08);

  color: var(--fg) !important;
}


/* ============================================================
   GENERAL
   ============================================================ */

main {
  overflow: hidden;
}


.section {

  width: min(
    calc(100% - 48px),
    var(--max-width)
  );

  margin:
    0 auto;

  padding:
    80px 0;
}


.section-label {

  margin-bottom: 16px;

  color: var(--subtle);

  font-size: 11px;
  font-weight: 600;

  letter-spacing: 0.16em;
}


h1,
h2,
h3,
p {
  margin-top: 0;
}


h1,
h2 {

  letter-spacing: -0.045em;

  font-weight: 500;
}


h2 {

  margin-bottom: 20px;

  font-size:
    clamp(38px, 5vw, 62px);

  line-height: 1.02;
}


p {

  color: var(--muted);

  line-height: 1.7;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.primary-button,
.secondary-button {

  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 44px;

  padding: 0 18px;

  border-radius: 8px;

  font-size: 13px;
  font-weight: 500;

  transition:
    transform 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}


.primary-button {

  background: var(--fg);
  color: #111116;
}


.primary-button:hover {

  background: white;

  transform:
    translateY(-1px);
}


.secondary-button {

  border:
    1px solid var(--border);

  color: var(--fg);

  background:
    rgba(255, 255, 255, 0.025);
}


.secondary-button:hover {

  border-color:
    var(--border-hover);

  background:
    rgba(255, 255, 255, 0.05);
}


.primary-button.large {

  min-height: 50px;

  padding:
    0 25px;

  font-size: 14px;
}


/* ============================================================
   HERO
   ============================================================ */

.hero {

  min-height:
    820px;

  width: min(
    calc(100% - 48px),
    1280px
  );

  margin:
    0 auto;

  padding:
    150px 0 100px;

  display: grid;

  grid-template-columns:
    minmax(0, 0.82fr)
    minmax(0, 1.18fr);

  align-items: center;

  gap: 50px;
}


.hero-content {
  position: relative;
  z-index: 3;
}


.eyebrow {

  margin-bottom: 20px;

  color: var(--subtle);

  font-size: 11px;
  font-weight: 600;

  letter-spacing: 0.18em;
}


.hero h1 {

  margin-bottom: 25px;

  font-size:
    clamp(48px, 6vw, 78px);

  line-height: 0.98;
}


.hero-description {

  max-width: 490px;

  margin-bottom: 30px;

  font-size: 16px;
}


.hero-actions {

  display: flex;
  align-items: center;

  gap: 10px;

  margin-bottom: 18px;
}


.hero-note {

  color: var(--subtle);

  font-size: 11px;
}


/* ============================================================
   HERO ROOM
   ============================================================ */

.hero-room {

  position: relative;

  /*
     Exact aspect ratio of the hero image:
     2064 × 1152
  */
  aspect-ratio: 2064 / 1152;

  width: 100%;

  overflow: hidden;

  border:
    1px solid var(--border);

  border-radius: 16px;

  background: #0c0c10;

  box-shadow:
    0 40px 100px
    rgba(0, 0, 0, 0.45);
}


.room-glow {

  position: absolute;

  inset: 0;

  z-index: 3;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(255,255,255,0.06),
      transparent 55%
    );
}


.hero-background {

  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  /*
     The container now has the exact same aspect ratio
     as the source image, so contain will not create
     empty space around the image.
  */
  object-fit: contain;

  image-rendering: pixelated;
}


/*
   PUDU SPRITE

   Sprite sheet:
   768 × 768
   3 columns × 3 rows

   Each frame:
   256 × 256

   The JS changes background-position between
   the 9 cells.
*/

.hero-character {

  position: absolute;

  bottom: 6%;
  left: 68%;

  width: 92px;
  height: 92px;

  z-index: 4;

  /* background-image:
    url("images/characters/pudu/ss_pudu.png"); */

  background-repeat: no-repeat;

  background-size:
    300% 300%;

  background-position:
    0% 0%;

  image-rendering: pixelated;

  transform:
    translateX(-50%);
}


.hero-clock {

  position: absolute;

  top: 6%;

  left: 6%;

  z-index: 5;

  display: flex;
  flex-direction: column;

  gap: 3px;

  text-shadow:
    0 2px 8px rgba(0,0,0,0.5);
}


.hero-clock span:first-child {

  font-size: 24px;
  font-weight: 500;

  letter-spacing: -0.03em;
}


.hero-clock span:last-child {

  color: rgba(255,255,255,0.7);

  font-size: 11px;
}


/* ============================================================
   INTRO
   ============================================================ */

.intro {

  max-width: 800px;

  text-align: center;
}


.intro .section-label {

  margin-bottom: 22px;
}


.intro h2 {
  margin-bottom: 26px;
}


.intro p {

  max-width: 650px;

  margin:
    0 auto;

  font-size: 16px;
}


/* ============================================================
   SECTION HEADING
   ============================================================ */

.section-heading {

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 50px;

  margin-bottom: 40px;
}


.section-heading > p {

  max-width: 370px;

  margin-bottom: 5px;
}


.section-heading.centered {

  display: block;

  max-width: 650px;

  margin:
    0 auto 40px;

  text-align: center;
}


.section-heading.centered p {

  max-width: 500px;

  margin:
    0 auto;
}


/* ============================================================
   FEATURES
   ============================================================ */

.features {

  border-top:
    1px solid rgba(255,255,255,0.04);
}


.feature-grid {

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 10px;
}


.feature-card {

  min-height: 250px;

  padding: 28px;

  border:
    1px solid var(--border);

  border-radius: var(--radius);

  background:
    rgba(26,26,32,0.55);

  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}


.feature-card:hover {

  transform:
    translateY(-3px);

  border-color:
    var(--border-hover);

  background:
    rgba(32,32,39,0.75);
}


.feature-icon {

  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 30px;

  border:
    1px solid var(--border);

  border-radius: 9px;

  color: var(--fg);

  font-size: 18px;
}


.feature-card h3 {

  margin-bottom: 10px;

  font-size: 16px;
  font-weight: 500;
}


.feature-card p {

  margin: 0;

  font-size: 13px;
}


/* ============================================================
   CUSTOMIZE
   ============================================================ */

.customize {

  display: grid;

  grid-template-columns:
    1.15fr
    0.85fr;

  align-items: center;

  gap: 90px;
}


.showcase-window {

  position: relative;

  overflow: hidden;

  aspect-ratio: 16 / 10;

  border:
    1px solid var(--border);

  border-radius: 15px;

  background: #0b0b0f;

  box-shadow:
    0 35px 80px
    rgba(0,0,0,0.35);
}


.showcase-window > img {

  width: 100%;
  height: 100%;

  object-fit: cover;

  image-rendering: pixelated;
}


/*
   PUDU SPRITE

   3 × 3 sprite sheet.
*/

.showcase-character {

  position: absolute;

  left: 67%;
  bottom: 5%;

  width: 88px;
  height: 88px;

  /* background-image:
    url("images/characters/pudu/ss_pudu.png"); */

  background-repeat: no-repeat;

  background-size:
    300% 300%;

  background-position:
    0% 0%;

  image-rendering: pixelated;
}


.customize-content p {

  margin-bottom: 30px;

  font-size: 15px;
}


.customize-list {

  display: flex;
  flex-direction: column;

  gap: 14px;
}


.customize-item {

  display: flex;
  align-items: center;

  gap: 11px;

  color: #d0d0d7;

  font-size: 13px;
}


.check {

  display: flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;

  border-radius: 50%;

  background:
    rgba(255,255,255,0.08);

  color: var(--fg);

  font-size: 11px;
}


/* ============================================================
   CHARACTERS
   ============================================================ */

.characters {

  border-top:
    1px solid rgba(255,255,255,0.04);
}


.character-grid {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 12px;
}


.character-card {

  overflow: hidden;

  border:
    1px solid var(--border);

  border-radius: var(--radius);

  background:
    rgba(26,26,32,0.6);

  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}


.character-card:hover {

  transform:
    translateY(-3px);

  border-color:
    var(--border-hover);
}


.character-card.active {

  border-color:
    rgba(255,255,255,0.2);
}


.character-preview {

  height: 260px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    rgba(255,255,255,0.025);
}


/*
   PUDU CHARACTER CARD SPRITE

   3 × 3 sprite sheet.

   NOTE:
   Path intentionally left exactly as provided.
*/

.character-sprite {

  width: 128px;
  height: 128px;

  background-image:
    url("images/characters/ss_pudu.png");

  background-repeat: no-repeat;

  background-size:
    300% 300%;

  background-position:
    0% 0%;

  image-rendering: pixelated;
}


.character-placeholder {

  display: flex;
  align-items: center;
  justify-content: center;

  width: 80px;
  height: 80px;

  border:
    1px dashed var(--border);

  border-radius: 12px;

  color: var(--subtle);

  font-size: 25px;
}


.character-card-info {

  padding: 18px 20px;

  border-top:
    1px solid var(--border);
}


.character-card-info h3 {

  margin-bottom: 5px;

  font-size: 14px;
  font-weight: 500;
}


.character-card-info span {

  color: var(--subtle);

  font-size: 11px;
}


/* ============================================================
   ROOMS
   ============================================================ */

.rooms {

  border-top:
    1px solid rgba(255,255,255,0.04);
}


.room-grid {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 12px;
}


.room-card {

  overflow: hidden;

  border:
    1px solid var(--border);

  border-radius: var(--radius);

  background:
    rgba(26,26,32,0.6);

  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}


.room-card:hover {

  transform:
    translateY(-3px);

  border-color:
    var(--border-hover);
}


.room-card.active {

  border-color:
    rgba(255,255,255,0.2);
}


.room-image {

  position: relative;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  background: #0d0d11;
}


.room-image img {

  width: 100%;
  height: 100%;

  object-fit: cover;

  image-rendering: pixelated;

  transition:
    transform 0.4s ease;
}


.room-card:hover .room-image img {

  transform:
    scale(1.025);
}


.room-badge {

  position: absolute;

  top: 12px;
  left: 12px;

  padding:
    5px 8px;

  border:
    1px solid rgba(255,255,255,0.12);

  border-radius: 5px;

  background:
    rgba(10,10,14,0.75);

  backdrop-filter: blur(8px);

  color: var(--fg);

  font-size: 9px;
  font-weight: 600;

  letter-spacing: 0.1em;
}


.room-badge.coming {

  color: var(--muted);
}


.room-info {

  padding: 18px 20px;
}


.room-info h3 {

  margin-bottom: 5px;

  font-size: 14px;
  font-weight: 500;
}


.room-info p {

  margin: 0;

  font-size: 12px;
}


/* ============================================================
   CTA
   ============================================================ */

.cta {

  padding-top: 100px;
  padding-bottom: 140px;
}


.cta-inner {

  position: relative;

  overflow: hidden;

  padding:
    90px 40px;

  border:
    1px solid var(--border);

  border-radius: 18px;

  text-align: center;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(255,255,255,0.06),
      transparent 55%
    );
}


.cta-inner h2 {

  margin-bottom: 20px;
}


.cta-inner p {

  max-width: 500px;

  margin:
    0 auto 30px;

  font-size: 15px;
}


.cta-note {

  margin-top: 13px;

  color: var(--subtle);

  font-size: 10px;
}


/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {

  width: min(
    calc(100% - 48px),
    var(--max-width)
  );

  margin:
    0 auto;

  padding:
    50px 0 30px;

  border-top:
    1px solid var(--border);

  color: var(--subtle);
}


.footer-brand p {

  margin-top: 8px;

  font-size: 12px;
}


.footer-links {

  display: flex;

  gap: 22px;

  margin:
    30px 0;

  font-size: 12px;
}


.footer-links a:hover {

  color: var(--fg);
}


.footer-bottom {

  display: flex;
  justify-content: space-between;

  padding-top: 20px;

  border-top:
    1px solid rgba(255,255,255,0.04);

  font-size: 10px;
}


/* ============================================================
   ANIMATION
   ============================================================ */

@keyframes characterIdle {

  0%,
  100% {

    transform:
      translateX(-50%)
      translateY(0);
  }

  50% {

    transform:
      translateX(-50%)
      translateY(-3px);
  }
}


.hero-character {

  animation:
    characterIdle 2.4s ease-in-out infinite;
}


.showcase-character {

  animation:
    showcaseIdle 2.4s ease-in-out infinite;
}


@keyframes showcaseIdle {

  0%,
  100% {

    transform:
      translateY(0);
  }

  50% {

    transform:
      translateY(-3px);
  }
}




/* ============================================================
    ITEM PREVIEW GLOW
    ============================================================ */
  
    .hero-room {
      animation:
        item-preview-glow 2.2s ease-in-out infinite;
    }
    
    @keyframes item-preview-glow {
    
      0%,
      100% {
        box-shadow:
          0 6px 20px
          rgba(0, 0, 0, 0.12),
    
          0 0 10px
          rgba(255, 255, 255, 0.10),
    
          0 0 24px
          rgba(255, 255, 255, 0.05);
      }
    
      50% {
        box-shadow:
          0 6px 20px
          rgba(0, 0, 0, 0.12),
    
          0 0 18px
          rgba(255, 255, 255, 0.40),
    
          0 0 42px
          rgba(255, 255, 255, 0.10);
      }
    
    }
    

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

  .site-header {

    padding:
      0 20px;
  }


  .nav {
    display: none;
  }


  .mobile-menu-button {
    display: block;
  }


  .hero {

    grid-template-columns:
      1fr;

    min-height:
      auto;

    padding-top:
      130px;

    gap: 55px;
  }


  .hero-content {

    max-width:
      650px;

    margin:
      0 auto;

    text-align: center;
  }


  .hero-description {

    margin-left: auto;
    margin-right: auto;
  }


  .hero-actions {

    justify-content: center;
  }


  .hero-note {
    text-align: center;
  }


  .feature-grid {

    grid-template-columns:
      repeat(2, 1fr);
  }


  .customize {

    grid-template-columns:
      1fr;

    gap: 50px;
  }


  .customize-content {

    max-width:
      650px;
  }


  .character-grid,
  .room-grid {

    grid-template-columns:
      1fr 1fr;
  }

}


@media (max-width: 600px) {

  .section {

    width:
      calc(100% - 32px);

    padding:
      60px 0;
  }


  .hero {

    width:
      calc(100% - 32px);

    padding:
      115px 0 60px;
  }


  .hero h1 {

    font-size:
      clamp(42px, 13vw, 60px);
  }


  .hero-description {

    font-size: 14px;
  }


  .hero-actions {

    flex-direction:
      column;

    align-items:
      stretch;
  }


  .hero-actions a {
    width: 100%;
  }


  .section-heading {

    display: block;

    margin-bottom:
      28px;
  }


  .section-heading > p {

    margin-top:
      20px;
  }


  .feature-grid {

    grid-template-columns:
      1fr;
  }


  .feature-card {

    min-height:
      auto;
  }


  .character-grid,
  .room-grid {

    grid-template-columns:
      1fr;
  }


  .character-preview {

    height:
      220px;
  }


  .cta-inner {

    padding:
      65px 22px;
  }


  .footer-bottom {

    flex-direction:
      column;

    gap: 8px;
  }


  .footer-links {

    flex-wrap:
      wrap;
  }

}