/* ================================= */
/*  Jon & Dasia's Terraria Dino Run  */
/*  — Pixel World Design System —    */
/* ================================= */

:root {
  --primary:       #3bbd3b;
  --primary-dark:  #28a428;
  --accent:        #e8d44d;
  --accent-dark:   #c4ad28;
  --sky:           #4a8ac0;
  --dirt:          #6b4a2a;
  --stone:         #625e64;
  --wood:          #563a24;
  --white:         #f0ece4;
  --text-dark:     #1c1820;
  --text-light:    #f0ece4;
  --font-main:     'Nunito', 'Segoe UI', sans-serif;
  --font-pixel:    'Press Start 2P', monospace;
  --radius:        2px;
}

/* =============== BASE =============== */
*,
*::before,
*::after {
  margin: 0; padding: 0; box-sizing: border-box;
}

html, body {
  width: 100%; height: 100%; overflow: hidden;
  font-family: var(--font-main);
  color: var(--text-dark);
  background: #1a1a2e;
}

/* =============== CANVAS =============== */
#game-container {
  display: block;
  width: 100vw; height: 100vh;
  background: #5cb8ff;
  overflow: hidden;
}
#game-container canvas {
  display: block;
  image-rendering: pixelated;
}

/* ============================================ */
/*  LOBBY — Woodland Picnic Invitation          */
/* ============================================ */
#lobby {
  position: fixed; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 8vh;
  gap: 0;
  z-index: 100;
  background:
    url('../assets/lobby-bg.png') center center / cover no-repeat;
  overflow: hidden;
}
/* Warm vignette overlay */
#lobby::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(15, 8, 3, 0.45) 100%);
  z-index: 0;
  pointer-events: none;
}
/* Golden-hour light wash */
#lobby::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(255, 220, 140, 0.06) 0%,
      rgba(255, 200, 100, 0.03) 40%,
      transparent 60%,
      rgba(10, 5, 2, 0.2) 100%
    );
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: soft-light;
}
#lobby > * { position: relative; z-index: 5; }

/* Terrain sits behind content but above background overlays */
#lobby > .terrain-wrapper {
  position: fixed;
  z-index: 2;
}

/* Ambient / bird / foreground canvases */
#ambient-canvas,
#bird-canvas,
#foreground-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: pixelated;
}
#ambient-canvas { z-index: 1; }
#bird-canvas { z-index: 1; }
#foreground-canvas { z-index: 10; }

#disconnect-overlay {
  position: fixed; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  background: rgba(10, 10, 20, 0.85);
}

/* ─────────────────────────────────────────── */
/*  TITLE SIGN — Wooden hanging signpost       */
/* ─────────────────────────────────────────── */
.lobby-title-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px;
  margin-top: 0;
  position: relative;
  overflow: visible;

}
@keyframes signSway {
  0%   { transform: rotate(-0.8deg); }
  100% { transform: rotate(0.8deg); }
}

/* Rope hangers — stretch to top of page */
.sign-post {
  position: absolute;
  top: -8vh;
  left: 0; right: 0;
  height: 8vh;
  z-index: 2;
  pointer-events: none;
}
.sign-post::before,
.sign-post::after {
  content: '';
  position: absolute;
  top: 0;
  width: 8px;
  height: 100%;
  background:
    repeating-linear-gradient(180deg,
      #c89840 0px, #a07828 2px, #d8a848 4px, #b08830 6px);
  border: 1px solid #7a5818;
  border-radius: 3px;
  image-rendering: pixelated;
  box-shadow: 1px 2px 3px rgba(0,0,0,0.4);
}
.sign-post::before { left: 55px; }
.sign-post::after { right: 55px; }

/* Leaf accents on sign */
.sign-leaf {
  position: absolute;
  width: 26px;
  height: 18px;
  z-index: 6;
  filter: drop-shadow(1px 2px 1px rgba(0,0,0,0.3));
}
.sign-leaf--left {
  top: 2px; left: 8px;
  background: linear-gradient(135deg, #5aaa38, #3a7a20);
  clip-path: polygon(0% 80%, 30% 0%, 100% 20%, 70% 100%);
  transform: rotate(-25deg);
}
.sign-leaf--right {
  top: 2px; right: 8px;
  background: linear-gradient(225deg, #60b040, #4a8a28);
  clip-path: polygon(0% 20%, 30% 100%, 100% 80%, 70% 0%);
  transform: rotate(20deg);
}

.title-banner {
  text-align: center;
  padding: 16px 18px 14px;
  position: relative;
  image-rendering: pixelated;
  /* Bright golden-orange wood frame with grain */
  background:
    /* Horizontal grain lines */
    repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 5px,
      rgba(0,0,0,0.06) 5px, rgba(0,0,0,0.06) 6px,
      transparent 6px, transparent 8px,
      rgba(160,100,20,0.08) 8px, rgba(160,100,20,0.08) 9px
    ),
    /* Wavy grain streaks */
    radial-gradient(ellipse 120px 8px at 20% 30%, rgba(255,200,80,0.12) 0%, transparent 100%),
    radial-gradient(ellipse 100px 6px at 70% 65%, rgba(255,200,80,0.1) 0%, transparent 100%),
    radial-gradient(ellipse 80px 5px at 40% 80%, rgba(0,0,0,0.06) 0%, transparent 100%),
    /* Top highlight — light hitting the top */
    linear-gradient(180deg,
      rgba(255,220,120,0.25) 0%,
      rgba(255,200,80,0.1) 15%,
      transparent 35%
    ),
    /* Bottom shadow */
    linear-gradient(180deg,
      transparent 70%,
      rgba(0,0,0,0.12) 100%
    ),
    /* Left highlight edge */
    linear-gradient(90deg,
      rgba(255,220,120,0.15) 0%,
      transparent 12%
    ),
    /* Base warm golden wood */
    linear-gradient(180deg, #d09030 0%, #c08028 30%, #a86a20 70%, #946018 100%);
  border-radius: 4px;
  filter:
    drop-shadow(0 3px 0 #6a4010)
    drop-shadow(0 6px 12px rgba(0,0,0,0.5));
}

/* Recessed inner panel — darker wood inset */
.sign-inset {
  position: relative;
  z-index: 2;
  padding: 14px 24px 10px;
  background:
    /* Top edge shadow — recessed depth */
    linear-gradient(180deg,
      rgba(0,0,0,0.25) 0%,
      rgba(0,0,0,0.1) 15%,
      transparent 40%
    ),
    /* Left edge shadow */
    linear-gradient(90deg,
      rgba(0,0,0,0.15) 0%,
      transparent 15%
    ),
    /* Bottom catch-light */
    linear-gradient(180deg,
      transparent 75%,
      rgba(200,150,80,0.08) 100%
    ),
    /* Horizontal grain — wider, wavier */
    repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 6px,
      rgba(0,0,0,0.07) 6px, rgba(0,0,0,0.07) 7px,
      transparent 7px, transparent 10px,
      rgba(0,0,0,0.04) 10px, rgba(0,0,0,0.04) 11px
    ),
    /* Wavy grain knots */
    radial-gradient(ellipse 60px 10px at 70% 45%, rgba(0,0,0,0.08) 0%, transparent 100%),
    radial-gradient(ellipse 50px 8px at 30% 70%, rgba(0,0,0,0.06) 0%, transparent 100%),
    radial-gradient(ellipse 40px 14px at 80% 80%, rgba(80,50,20,0.1) 0%, transparent 100%),
    /* Base dark brown wood */
    linear-gradient(180deg, #7a5028 0%, #6a4420 40%, #5a3818 80%, #4a3010 100%);
  border-radius: 2px;
  /* Dark groove border — shadow between frame and panel */
  border: 3px solid #3a2008;
  border-top-color: #2a1805;
  border-left-color: #2a1805;
  border-bottom-color: #5a4018;
  border-right-color: #5a4018;
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,0.35),
    inset 3px 0 6px rgba(0,0,0,0.15),
    inset 0 -2px 0 rgba(200,150,80,0.1),
    inset -2px 0 0 rgba(200,150,80,0.05),
    /* outer groove shadow on frame side */
    0 2px 0 rgba(255,200,80,0.1);
}

/* No more chamfered clip-path border overlay — using real border now */
.title-banner::before {
  display: none;
}
/* Inner highlight line across top of frame */
.title-banner::after {
  content: '';
  position: absolute;
  top: 3px; left: 8px; right: 8px;
  height: 2px;
  background: linear-gradient(90deg, transparent 5%, rgba(255,230,140,0.3) 30%, rgba(255,230,140,0.35) 50%, rgba(255,230,140,0.3) 70%, transparent 95%);
  z-index: 3;
  pointer-events: none;
  border-radius: 1px;
}

.game-title-main {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(20px, 4vw, 36px);
  color: #FFE8A0;
  line-height: 1.5;
  text-shadow:
    2px 2px 0 #2a1600,
    -1px -1px 0 #2a1600,
    1px -1px 0 #2a1600,
    -1px 1px 0 #2a1600;
  letter-spacing: 2px;
  margin: 0;
  position: relative;
  z-index: 2;
}

.game-title-sub {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(28px, 5.5vw, 48px);
  color: #A8E8A0;
  line-height: 1.4;
  text-shadow:
    2px 2px 0 #1a2a10,
    -1px -1px 0 #1a2a10,
    1px -1px 0 #1a2a10,
    -1px 1px 0 #1a2a10;
  letter-spacing: 3px;
  margin: 4px 0 0 0;
  position: relative;
  z-index: 2;
}

.lobby-subtitle {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #e8c8a0;
  letter-spacing: 3px;
  margin-top: 10px;
  text-shadow: 1px 1px 0 #2a1a08;
  opacity: 0.85;
  position: relative;
  z-index: 2;
}

/* Decorative divider between sign and card */
.title-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
  width: 200px;
}
.title-divider::before,
.title-divider::after {
  content: '';
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(180,140,80,0.4), transparent);
}
.divider-leaf {
  font-size: 14px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
  opacity: 0.7;
}

/* ─────────────────────────────────────────── */
/*  TERRAIN — Forest + tiled ground            */
/* ─────────────────────────────────────────── */
.terrain-wrapper {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 60vh;
  pointer-events: none;
  z-index: 2;
}

/* Far forest silhouette — treeline across mid-screen */
.terrain-forest-far {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 100%;
  background: url('../assets/terrain/mountains-1.png') repeat-x bottom center;
  background-size: auto 100%;
  image-rendering: pixelated;
  z-index: 0;
  opacity: 0.55;
}

/* Atmospheric haze between far forest and trees */
.terrain-wrapper::before {
  content: '';
  position: absolute;
  bottom: 60px; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(60, 30, 40, 0.15) 30%,
    rgba(50, 25, 35, 0.3) 60%,
    rgba(40, 20, 28, 0.1) 100%
  );
  z-index: 1;
  pointer-events: none;
}
/* Ground-level mist / fog glow */
.terrain-wrapper::after {
  content: '';
  position: absolute;
  bottom: 50px; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(180, 160, 120, 0.06) 40%,
    rgba(200, 180, 140, 0.1) 70%,
    rgba(160, 140, 100, 0.04) 100%
  );
  z-index: 6;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Shared tree row styles */
.terrain-trees {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: flex-end;
  padding: 0;
}
.terrain-tree {
  image-rendering: pixelated;
  height: auto;
  flex-shrink: 0;
}

/* Back trees — darkest, packed tight */
.terrain-trees--back {
  height: 100%;
  z-index: 1;
  justify-content: space-evenly;
  padding: 0;
  margin: 0 -2%;
}
.terrain-trees--back .terrain-tree {
  filter: brightness(0.18) saturate(0.3) blur(0.8px);
  margin-bottom: 60px;
  margin-left: -25px;
  margin-right: -25px;
}
.terrain-tree-b1  { width: 210px; }
.terrain-tree-b2  { width: 185px; }
.terrain-tree-b3  { width: 230px; }
.terrain-tree-b4  { width: 175px; }
.terrain-tree-b5  { width: 200px; }
.terrain-tree-b6  { width: 220px; }
.terrain-tree-b7  { width: 190px; }
.terrain-tree-b8  { width: 195px; }
.terrain-tree-b9  { width: 225px; }
.terrain-tree-b10 { width: 180px; }
.terrain-tree-b11 { width: 210px; }
.terrain-tree-b12 { width: 200px; }

/* Dark fill behind mid/front trees for depth */
.terrain-trees--back::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 100%;
  background: linear-gradient(180deg,
    transparent 0%,
    transparent 25%,
    rgba(15, 8, 12, 0.5) 50%,
    rgba(10, 5, 8, 0.7) 75%,
    rgba(8, 4, 6, 0.8) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Mid trees — medium depth */
.terrain-trees--mid {
  height: 100%;
  z-index: 2;
  justify-content: space-evenly;
  padding: 0;
  margin: 0 -1%;
}
.terrain-trees--mid .terrain-tree {
  filter: brightness(0.45) saturate(0.6) drop-shadow(2px 4px 4px rgba(0,0,0,0.5));
  margin-bottom: 58px;
  margin-left: -20px;
  margin-right: -20px;
}
.terrain-tree-m1 { width: 260px; }
.terrain-tree-m2 { width: 225px; }
.terrain-tree-m3 { width: 280px; }
.terrain-tree-m4 { width: 240px; }
.terrain-tree-m5 { width: 255px; }
.terrain-tree-m6 { width: 275px; }
.terrain-tree-m7 { width: 235px; }
.terrain-tree-m8 { width: 265px; }
.terrain-tree-m9 { width: 250px; }

/* Dark fill between mid and front trees */
.terrain-trees--mid::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 100%;
  background: linear-gradient(180deg,
    transparent 0%,
    transparent 35%,
    rgba(12, 6, 10, 0.35) 55%,
    rgba(8, 4, 6, 0.5) 80%,
    rgba(6, 3, 5, 0.55) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Front trees — biggest, bright, dramatic */
.terrain-trees--front {
  height: 100%;
  z-index: 3;
  justify-content: space-between;
  padding: 0;
  margin: 0 -1%;
}
.terrain-trees--front .terrain-tree {
  filter: drop-shadow(4px 8px 10px rgba(0,0,0,0.6));
  margin-bottom: 55px;
  margin-left: -15px;
  margin-right: -15px;
}
.terrain-tree-f1 { width: 380px; }
.terrain-tree-f2 { width: 330px; }
.terrain-tree-f3 { width: 310px; }
.terrain-tree-f4 { width: 360px; }
.terrain-tree-f5 { width: 320px; }
.terrain-tree-f6 { width: 370px; }
.terrain-tree-f7 { width: 345px; }

/* Tiled ground strip — grass top */
.terrain-ground {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: url('../assets/terrain/ground-tile.png') repeat-x top left;
  background-size: 64px 128px;
  image-rendering: pixelated;
  z-index: 5;
}
/* Dirt fill below ground */
.terrain-dirt {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50px;
  background: #1e130e;
  z-index: 4;
}

/* ── Ground decorations ── */
.ground-decor {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  z-index: 5;
  pointer-events: none;
}
.decor {
  position: absolute;
  image-rendering: pixelated;
  pointer-events: none;
}

/* Flowers — scattered along the ground line */
.decor-flower { bottom: 52px; width: 28px; height: auto; }
.df-1  { left: 5%; }
.df-2  { left: 18%; }
.df-3  { left: 28%; }
.df-4  { left: 52%; }
.df-5  { left: 62%; }
.df-6  { left: 38%; }
.df-7  { left: 72%; }
.df-8  { left: 82%; }

/* Grass tufts — slightly larger, blend with ground */
.decor-grass { bottom: 55px; width: 36px; height: auto; }
.dg-1  { left: 2%; }
.dg-2  { left: 14%; }
.dg-3  { left: 34%; }
.dg-4  { left: 48%; }
.dg-5  { left: 58%; }
.dg-6  { left: 76%; }

/* Small rocks */
.decor-rock { bottom: 55px; width: 22px; height: auto; }
.dr-1  { left: 24%; }
.dr-2  { left: 68%; }

/* Lake / pond — sits in the ground between trees */
.decor-lake {
  bottom: 48px;
  left: 8%;
  width: 180px;
  height: auto;
  z-index: 5;
}

/* House decoration on terrain — proportional to dinos */
.terrain-house {
  position: absolute;
  bottom: 55px;
  right: 5%;
  width: 400px;
  height: 344px;
  background: url('../assets/terrain/house.png') center / contain no-repeat;
  image-rendering: pixelated;
  z-index: 6;
  filter: brightness(1.05) drop-shadow(0px 6px 8px rgba(0, 0, 0, 0.45)) drop-shadow(-2px 3px 3px rgba(0, 0, 0, 0.2));
}

/* Chimney smoke canvas */
.chimney-smoke {
  position: absolute;
  bottom: 55px;
  right: 5%;
  width: 400px;
  height: 550px;
  pointer-events: none;
  z-index: 6;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
/* Picnic scene canvas — dinos + blanket */
.picnic-scene {
  position: absolute;
  bottom: 48px;
  left: 45%;
  transform: translateX(-50%);
  width: 320px;
  height: 180px;
  image-rendering: pixelated;
  z-index: 7;
  pointer-events: none;
}

/* ─────────────────────────────────────────── */
/*  INVITATION CARD — Warm parchment panel     */
/* ─────────────────────────────────────────── */
.invitation-card {
  display: flex;
  flex-direction: column;
  width: min(440px, 90vw);
  /* Warmer, lighter parchment-wood look */
  background:
    repeating-linear-gradient(
      0deg,
      transparent, transparent 3px,
      rgba(0,0,0,0.03) 3px, rgba(0,0,0,0.03) 4px
    ),
    linear-gradient(175deg, #5a4828 0%, #4a3820 40%, #3e2e18 100%);
  overflow: visible;
  /* Notched top corners + pointed bottom tab */
  clip-path: polygon(
    0% 14px, 14px 0%, calc(100% - 14px) 0%, 100% 14px,
    100% 100%,
    calc(50% + 22px) 100%, 50% calc(100% + 16px), calc(50% - 22px) 100%,
    0% 100%
  );
  filter: drop-shadow(0 3px 0 #1a0f05) drop-shadow(0 8px 20px rgba(0,0,0,0.5));
  animation: cardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  position: relative;
  image-rendering: pixelated;
  padding-bottom: 10px;
}
/* Fold/crease line at top of card */
.card-fold {
  height: 3px;
  background: linear-gradient(90deg,
    transparent 10%, rgba(0,0,0,0.15) 30%,
    rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.15) 70%,
    transparent 90%);
  margin: 0;
}

/* Override old lobby-panel styles for invitation */
.lobby-panel.invitation-card {
  border: none;
  border-radius: 0;
}
.lobby-panel.invitation-card::before,
.lobby-panel.invitation-card::after {
  display: none;
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Body area ── */
.lobby-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 24px 22px;
  position: relative;
  /* Inner recessed frame */
  margin: 8px 10px;
  background:
    /* Top inner shadow — sunk into the wood */
    linear-gradient(180deg,
      rgba(0,0,0,0.2) 0%,
      rgba(0,0,0,0.08) 20%,
      transparent 50%
    ),
    /* Bottom catch-light — reflected light at bottom edge */
    linear-gradient(180deg,
      transparent 70%,
      rgba(255,220,140,0.04) 100%
    ),
    /* Base dark fill */
    rgba(0,0,0,0.14);
  border: 2px solid #3a2810;
  border-top-color: #221508;
  border-left-color: #221508;
  border-bottom-color: #7a5a30;
  border-right-color: #7a5a30;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.25),
    inset 0 -1px 0 rgba(255,220,140,0.06);
}
.lobby-body::before,
.lobby-body::after { display: none; }

/* ── Header / prompt area ── */
.lobby-status-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  background: none;
  margin: 0;
  padding: 0;
  border: none;
}
.lobby-status-area::after { display: none; }

.invitation-prompt {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: #ffe8c0;
  text-shadow: 1px 1px 0 #1a1008;
  text-align: center;
  line-height: 1.6;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(120,90,48,0.4);
  margin-bottom: 2px;
  width: 100%;
}
.lobby-status {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: #d8c8a0;
  margin: 0;
  text-shadow: 1px 1px 0 #1a1008;
}
.lobby-role {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  font-weight: 800;
  color: #a0e0a0;
  margin: 0;
  letter-spacing: 0.5px;
  min-height: 1em;
  text-shadow: 1px 1px 0 #0a1a08;
}

/* ── Form elements ── */
.lobby-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.woodland-input {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  padding: 14px 16px;
  background: #1e1208;
  border: 2px solid #5a4020;
  border-top-color: #3a2810;
  border-left-color: #3a2810;
  border-bottom-color: #7a5a30;
  border-right-color: #7a5a30;
  border-radius: 0;
  color: #f0e0c0;
  outline: none;
  width: 100%;
  text-shadow: 1px 1px 0 #000;
  image-rendering: pixelated;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}
.woodland-input::placeholder {
  color: #6a5030;
  font-style: italic;
}
.woodland-input:focus {
  border-color: #b89040;
  border-top-color: #806030;
  border-left-color: #806030;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), 0 0 0 1px rgba(184,144,64,0.2);
}

/* Keep old pixel-input as fallback */
.pixel-input { display: none; }

.pixel-error {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #e07050;
  text-align: center;
  text-shadow: 1px 1px 0 #2a0800;
  margin: 0;
  animation: shake 0.3s ease;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* ── Dino Picker ── */
.dino-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 12px;
  border-top: 2px solid #3a2810;
  position: relative;
}
.dino-picker::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0; right: 0;
  height: 1px;
  background: #5a4020;
}

.dino-options {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.dino-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: #2a1a0a;
  border: 2px solid #5a4020;
  border-top-color: #3a2810;
  border-left-color: #3a2810;
  border-bottom-color: #7a5a30;
  border-right-color: #7a5a30;
  border-radius: 0;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  image-rendering: pixelated;
}
.dino-option:hover {
  border-color: #8a6830;
  background: #322010;
}
.dino-option.selected {
  border-color: #70c040;
  border-top-color: #509028;
  border-left-color: #509028;
  background: #1a2a0a;
  box-shadow: inset 0 0 0 1px #0a1a05;
}

.dino-preview-canvas {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
}

.dino-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #c8b890;
  text-shadow: 1px 1px 0 #000;
}

/* ── Player cards grid ── */
.player-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.player-card {
  display: grid;
  grid-template-columns: 48px 1fr 32px;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  background: #2a1a0a;
  border: 2px solid #5a4020;
  border-top-color: #3a2810;
  border-left-color: #3a2810;
  border-bottom-color: #7a5a30;
  border-right-color: #7a5a30;
  border-radius: 0;
  transition: border-color 0.2s, background 0.2s;
  image-rendering: pixelated;
}
.player-card.is-you {
  border-color: #8a6830;
  background: #352510;
}
.player-card.is-ready {
  border-color: #70c040;
  border-top-color: #509028;
  border-left-color: #509028;
  background: #1a2a0a;
}
.player-card.not-connected {
  opacity: 0.4;
}
.player-card.not-connected .card-avatar {
  visibility: hidden;
}
.player-card.not-connected .card-name {
  color: #6a5a40;
}
.player-card.not-connected .card-check {
  visibility: hidden;
}

.card-avatar {
  width: 48px;
  height: 48px;
  image-rendering: pixelated;
}

.card-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.card-name {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.5px;
  text-shadow: 1px 1px 0 #1a0a00;
}
.card-name--jon   { color: #90c8e8; }
.card-name--dasia { color: #e8a0c0; }

.card-status {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: #8a7a60;
  letter-spacing: 0.5px;
  line-height: 1;
}
.card-status.connected  { color: #b8c8a0; }
.card-status.ready-text { color: #80d060; text-shadow: 1px 1px 0 #0a1a05; }

.card-check {
  display: flex;
  align-items: center;
  justify-content: center;
}
.check-box {
  display: block;
  width: 20px; height: 20px;
  border-radius: 0;
  border: 2px solid #5a4020;
  border-top-color: #3a2810;
  border-left-color: #3a2810;
  border-bottom-color: #7a5a30;
  border-right-color: #7a5a30;
  background: #2a1a0a;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
}
.check-box.ready {
  border-color: #70c040;
  border-top-color: #509028;
  border-left-color: #509028;
  background: #50a030;
}
.check-box.ready::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ── Actions area ── */
.lobby-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 12px;
  border-top: 2px solid #3a2810;
  position: relative;
}
.lobby-actions::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0; right: 0;
  height: 1px;
  background: #5a4020;
}
.btn-ready {
  width: 100%;
  padding: 14px 24px;
  font-size: 14px;
  letter-spacing: 0.8px;
}
#ready-section {
  width: 100%;
}

/* ============================================ */
/*  BUTTONS — Woodland style                    */
/* ============================================ */
.btn {
  border: 2px solid #5a4020;
  border-radius: 0;
  padding: 12px 32px;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: 0.4px;
  position: relative;
  transition: transform 0.1s, background 0.12s;
  image-rendering: pixelated;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(2px);
}

.btn-woodland {
  background: linear-gradient(180deg, #5a9a35 0%, #488828 50%, #3a7020 100%);
  color: #e8ffd8;
  border: 3px solid #5a9030;
  border-top-color: #72b840;
  border-left-color: #72b840;
  border-radius: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 0 0 1px #2a4a14,
    0 3px 0 #1a3a0a,
    0 5px 8px rgba(0,0,0,0.3);
  text-shadow: 1px 1px 0 #1a3008;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  padding: 14px 32px;
  letter-spacing: 0.6px;
}
.btn-woodland:hover {
  background: linear-gradient(180deg, #68aa40 0%, #509830 50%, #428828 100%);
}
.btn-woodland:active {
  background: linear-gradient(180deg, #3a7020 0%, #488828 50%, #5a9a35 100%);
  box-shadow: inset 0 0 0 1px #2a4a14, 0 1px 0 #1a3a0a;
  transform: translateY(2px);
}

/* Keep old button classes for question modal */
.btn-coral {
  background: #4a7a2a;
  color: #e0f0d0;
  border: 3px solid #5a9030;
  border-top-color: #6aaa38;
  border-left-color: #6aaa38;
  border-radius: 0;
  box-shadow:
    inset 0 0 0 1px #2a4a14,
    0 3px 0 #1a3a0a;
  text-shadow: 1px 1px 0 #1a3008;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
}
.btn-coral:hover { background: #528a30; }
.btn-coral:active {
  box-shadow: inset 0 0 0 1px #2a4a14, 0 1px 0 #1a3a0a;
  transform: translateY(2px);
}

.btn-yellow {
  background: #6a5020;
  color: #ffe8a0;
  border: 3px solid #9a7a30;
  border-top-color: #b8983a;
  border-left-color: #b8983a;
  box-shadow:
    inset 0 0 0 1px #3a2a10,
    0 3px 0 #2a1a08;
  text-shadow: 1px 1px 0 #2a1a08;
}
.btn-yellow:hover { background: #7a5a28; }
.btn-yellow:active {
  box-shadow: inset 0 0 0 1px #3a2a10, 0 1px 0 #2a1a08;
  transform: translateY(2px);
}

/* Disconnect overlay card */
.lobby-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(420px, 92vw);
  background: linear-gradient(175deg, #4a3820, #3a2a15);
  border: 3px solid #6a5030;
  border-top-color: #8a7040;
  border-left-color: #8a7040;
  border-radius: 0;
  padding: 32px 40px;
  text-align: center;
  box-shadow:
    inset 0 0 0 1px #2a1a0a,
    0 3px 0 #1a0f05,
    0 8px 24px rgba(0,0,0,0.5);
  animation: cardIn 0.4s ease-out both;
  image-rendering: pixelated;
}

/* ============================================ */
/*  READY SECTION                               */
/* ============================================ */
#ready-section { display: flex; }

/* ============================================ */
/*  COUNTDOWN                                   */
/* ============================================ */
#countdown-display {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  width: 100%;
  text-align: center;
}
#countdown-number {
  font-family: 'Press Start 2P', monospace;
  font-size: 64px;
  font-weight: 900;
  color: #FFE8A0;
  text-shadow: 3px 3px 0 #3a2000;
  animation: pulse 0.5s ease-in-out infinite alternate;
  line-height: 1;
}
@keyframes pulse {
  from { transform: scale(1); }
  to   { transform: scale(1.1); }
}

/* ============================================ */
/*  QUESTION MODAL — Terraria NPC dialog        */
/* ============================================ */
#question-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-card {
  background: linear-gradient(180deg, #3a3a5c, #2a2a42);
  border: 3px solid #6a6a8a;
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 480px; width: 92%;
  box-shadow:
    0 0 0 2px #1a1a2e,
    0 16px 48px rgba(0,0,0,0.5);
  animation: modalIn 0.3s ease-out both;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(15px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
  background: linear-gradient(180deg, #4a4a6c, #3a3a5c);
  color: var(--accent);
  font-family: var(--font-pixel);
  font-size: 20px;
  font-weight: 800;
  padding: 16px 24px;
  text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border-bottom: 2px solid #5a5a7a;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
}

/* Heart icon (keep for question modal) */
.heart-icon {
  display: inline-block;
  width: 18px; height: 16px;
  position: relative;
}
.heart-emoji {
  font-size: 22px;
  vertical-align: middle;
}
.heart-icon::before,
.heart-icon::after {
  content: '';
  position: absolute; top: 0;
  width: 9px; height: 14px;
  border-radius: 9px 9px 0 0;
  background: #e05070;
}
.heart-icon::before {
  left: 0;
  transform: rotate(-45deg);
  transform-origin: bottom right;
}
.heart-icon::after {
  right: 0;
  transform: rotate(45deg);
  transform-origin: bottom left;
}

.question-asker {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  text-align: center;
  padding: 10px 28px 0;
  margin: 0;
  letter-spacing: 0.5px;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}
.asker-jon   { color: #90c8e8; }
.asker-dasia { color: #e8a0c0; }

#question-text {
  font-size: 18px;
  padding: 26px 28px 18px;
  line-height: 1.55;
  color: #d0d0e0;
  text-align: center;
  font-weight: 600;
}

.modal-buttons {
  display: flex; gap: 12px;
  justify-content: center;
  padding: 4px 28px 26px;
}
.modal-buttons .btn {
  font-size: 14px;
  padding: 10px 22px;
}

/* ============================================ */
/*  DISCONNECT OVERLAY extras                   */
/* ============================================ */
#disconnect-overlay .lobby-card h2 {
  font-family: var(--font-pixel);
  font-size: 24px;
  font-weight: 800;
  color: #e05050;
  margin-bottom: 10px;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.6);
}
#disconnect-overlay .lobby-card p {
  font-size: 15px;
  font-weight: 600;
  color: #c0d8c0;
  line-height: 1.5;
}