/*this file has common styling attributes for all of the components, they should be overwritten as needed*/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Emoji:wght@300..700&display=swap'); 

:root {
	--back-color: #0b0b0b;
	--border-color: #303030;
}

.standard-component {
	background-color: var(--back-color);
	border-radius: 25px;
	border-width: 1px;
	border-style: solid;
	border-color: var(--border-color);
	display: flex;
	overflow: hidden;
	text-overflow: clip;
	position: absolute;
	flex-direction: column;
	color: white;
}

.submit-component {
  background-color: var(--back-color);
  color: white;
  border-radius: 8px;
  opacity: 1;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.submit-component-text {
  padding: 10px;
}

.submit-component:hover {
  background-color: var(--border-color);
}

.submit-component:active {
  background-color: #000000;
  transform: scale(0.99);
}

.border-component {
  border: 4px solid rgba(255, 255, 255, 0.85);
  box-sizing: border-box;
  border-radius: 4px;
  position: absolute;

  filter: url('#wiggle-stroke');
  z-index: -1;
}

.emoji-component {
  font-family: "Noto Emoji", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variant-emoji: text;
  font-palette: --monochrome;
  font-size-adjust: none;

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

.header-component {
	border-radius: 0 0 25px 25px;
	height: 100%;
	background-color: var(--back-color);
	display: flex;
	flex-direction: column;
}

.header-component img {
	width: 40%;
}

.progress-bar {
  flex: 1;
  height: 1vh;
  border: 1.5px solid #ffffff;
  background-color: transparent;
  box-sizing: border-box;
  position: relative;
	/* height: 3px;
	border-radius: 5%;
	background-color: var(--accent-1); */
}

.nav-menu {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 3%;
}

.component-container {
	position: absolute;
	display: none;
}

.component-container > div {
	width: 100%;
	height: 100%;
}

.typewriter-target {
  font-family: IBM Plex Mono;
}

/* copied from figma 17.8.2026 */
.title {
  font-family: IBM Plex Sans;
  font-weight: 700;
  font-style: Bold;
  font-size: 36px;
  /* leading-trim: NONE; */
  line-height: 44px;
  letter-spacing: -0.5%;
}

.h1 {
  font-family: IBM Plex Sans;
  font-weight: 700;
  font-style: Bold;
  font-size: 28px;
  /* leading-trim: NONE; */
  line-height: 36px;
  letter-spacing: -0.3%;
}

.h2 {
  font-family: IBM Plex Sans;
  font-weight: 600;
  font-style: SemiBold;
  font-size: 22px;
  /* leading-trim: NONE; */
  line-height: 29px;
  letter-spacing: -0.2%;

}

.h3 {
  font-family: IBM Plex Sans;
  font-weight: 600;
  font-style: SemiBold;
  font-size: 18px;
  /* leading-trim: NONE; */
  line-height: 24px;
  letter-spacing: 0%;

}

.body_text {
  font-family: IBM Plex Sans;
  font-weight: 400;
  font-style: Regular;
  font-size: 16px;
  /* leading-trim: NONE; */
  line-height: 24px;
  letter-spacing: 0%;

}
.emph_body {
  font-family: IBM Plex Sans;
  font-weight: 500;
  font-style: Medium;
  font-size: 16px;
  color: #FFFFFF;
  /* leading-trim: NONE; */
  line-height: 24px;
  letter-spacing: 0%;
}

.secondary_text {
  font-family: IBM Plex Sans;
  font-weight: 400;
  font-style: Regular;
  font-size: 14px;
  /* leading-trim: NONE; */
  line-height: 20px;
  letter-spacing: 0%;

}

.captions {
  font-family: IBM Plex Sans;
  font-weight: 500;
  font-style: Medium;
  font-size: 12px;
  /* leading-trim: NONE; */
  line-height: 16px;
  letter-spacing: 0.2%;

}

.legal {
  font-family: IBM Plex Sans;
  font-weight: 400;
  font-style: Regular;
  font-size: 11px;
  /* leading-trim: NONE; */
  line-height: 14px;
  letter-spacing: 0.2%;

}

.tap {
  font-family: IBM Plex Sans;
  font-weight: 500;
  font-style: Medium;
  font-size: 10px;
  /* leading-trim: NONE; */
  line-height: 12px;
  letter-spacing: 0.3%;

}

.prompt-text {
  font-size: 1.1rem;
  line-height: 1.4;
  margin-bottom: 2rem;
  color: #e2e4f6;
}

.option {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  cursor: pointer;
}

/* Custom Box Styling */
.checkbox-box {
  width: 40px;
  height: 40px;
  background-color: #d1d5db;
  flex-shrink: 0;
  margin-right: 15px;
  position: relative;
  transition: background-color 0.2s ease;
}

/* SVG Cross Overlay */
.checkbox-box svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.checkbox-box svg path {
  stroke: #1a1a2e;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  transition: stroke-dashoffset 0.25s ease-in-out;
}

/* Draw cross on selection */
.option.selected .checkbox-box svg path {
  stroke-dashoffset: 0;
}

.label-text {
  font-family: sans-serif;
  font-size: 0.95rem;
  line-height: 1.35;
  color: #e2e4f6;
}

.option.disabled {
  pointer-events: none;
  opacity: 0.7;
}
/* ============================================================
   MAP COMPONENT STYLES
   ============================================================ */

/* Main wrapper - fills entire component */
.quest-map-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Map frame - rectangular with rounded corners, NOT circular */
.quest-map-frame {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    border-radius: 20px;
    /* rectangle, not circle */
    border: 2px solid rgba(235, 162, 207, 0.45);
    box-shadow:
        0 0 20px rgba(235, 162, 207, 0.25),
        inset 0 0 20px rgba(160, 32, 240, 0.12);
    background: #0e091d;
}

/* Map canvas - fills the frame, no border-radius clipping */
.quest-map-canvas {
    width: 100%;
    height: 100%;
    border-radius: 0;
    /* remove 50% circle */
    background: #0e091d;
}

/* ============================================================
   LOCATION LABELS
   ============================================================ */
.quest-location-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: rgba(16, 10, 31, 0.85);
    border: 1px solid rgba(235, 162, 207, 0.5);
    border-radius: 10px;
    color: #f6d9ea;
    max-width: 180px;
    backdrop-filter: blur(4px);
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 12px;
    line-height: 14px;
    font-weight: 600;
    pointer-events: none;
    /* So clicks pass through to map */
}

.quest-location-photo img {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.quest-location-name {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 12px;
    line-height: 14px;
    font-weight: 600;
    color: #f6d9ea;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

/* ============================================================
   COLLECTIBLE NODES - Pop animations
   ============================================================ */
.quest-floating-node {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(30, 22, 53, 0.8);
    border: 2px solid #ff007f;
    border-radius: 50%;
    box-shadow: 0 0 15px #ff007f;
    scale: 1;
    opacity: 1;
    transition: scale 0.28s ease, opacity 0.35s ease, filter 0.2s ease;
}

.quest-floating-node img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.quest-floating-node:hover {
    filter: brightness(1.2);
}

/* Spawn animation - starts small and fades in */
.quest-node-spawn {
    opacity: 0;
}

/* Hide animation - shrinks and fades out */
.quest-node-hide {
    opacity: 0;
}

/* Collected animation - pops and disappears */
.quest-floating-node.collected {
    scale: 1.5 !important;
    opacity: 0;
}

/* ============================================================
   GHOST WALKERS - Glowing dots on paths
   ============================================================ */
.quest-ghost-walker {
    width: 10px;
    height: 10px;
    background: #eba2cf;
    border-radius: 50%;
    box-shadow: 0 0 15px #eba2cf, 0 0 30px rgba(235, 162, 207, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    animation: ghostPulse 1.5s ease-in-out infinite alternate;
}

@keyframes ghostPulse {
    0% {
        box-shadow: 0 0 10px #eba2cf, 0 0 20px rgba(235, 162, 207, 0.3);
        transform: scale(0.9);
    }
    100% {
        box-shadow: 0 0 25px #eba2cf, 0 0 50px rgba(235, 162, 207, 0.5);
        transform: scale(1.1);
    }
}

/* ============================================================
   USER LOCATION DOT
   ============================================================ */
.user-location-dot {
    width: 18px;
    height: 18px;
    background: #00f0ff;
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 15px #00f0ff, 0 0 30px #00f0ff;
    animation: userPulse 2s infinite;
}

@keyframes userPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.7);
    }
    70% {
        box-shadow: 0 0 0 14px rgba(0, 240, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 240, 255, 0);
    }
}

/* ============================================================
   DESTINATION MARKER
   ============================================================ */
.quest-destination-marker {
    width: 12px;
    height: 12px;
    background: #ff007f;
    border: 2px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 20px #ff007f, 0 0 40px rgba(255, 0, 127, 0.3);
}

/* ============================================================
   LOCATE ME BUTTON
   ============================================================ */
.quest-locate-btn {
    position: absolute;
    bottom: 3%;
    right: 4%;
    z-index: 30;
    background: rgba(23, 21, 40, 0.85);
    border: 1px solid rgba(235, 162, 207, 0.6);
    color: #eba2cf;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    transition: background 0.2s ease, border-color 0.2s ease;
    pointer-events: auto;
}

.quest-locate-btn:hover {
    background: rgba(235, 162, 207, 0.3);
}

.quest-locate-btn.locating {
    animation: pulseBtn 1s infinite alternate;
}

.quest-locate-btn.active {
    border-color: #00f0ff;
    color: #00f0ff;
}

@keyframes pulseBtn {
    from {
        border-color: rgba(235, 162, 207, 0.4);
    }
    to {
        border-color: rgba(255, 0, 127, 1);
    }
}

/* ============================================================
   MAP SCREEN OVERRIDE
   ============================================================ */
.map-screen {
    background-color: #100a1f;
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */
@media (max-width: 480px) {
    .quest-location-label {
        max-width: 140px;
        padding: 4px 6px;
        font-size: 10px;
    }
    .quest-location-photo img {
        width: 20px;
        height: 20px;
    }
    .quest-location-name {
        font-size: 10px;
        max-width: 90px;
    }
    .quest-floating-node {
        width: 32px;
        height: 32px;
    }
    .quest-floating-node img {
        width: 18px;
        height: 18px;
    }
    .quest-locate-btn {
        bottom: 8%;
        right: 10%;
        width: 32px;
        height: 32px;
    }
}

/* ============================================================
   DESTROYED MAP STYLES (prevent overflow)
   ============================================================ */
.quest-map-frame:empty,
.quest-map-canvas:empty {
    display: none;
}

.map-screen {
	background-color: #100a1f;
}