*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Pixelify Sans', sans-serif;
}

.experience {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}

#experience-canvas {
    width: 100%;
    height: 100%;
}


.hidden {
    display: none !important;
}

.modal{
    z-index: 999;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    max-width: 800px;
    max-height: 90vh;
    background-color: #ad8671; 
    border: 3px solid #fff;
    border-radius: 12px;
    color: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.modal-wrapper {
    padding: 24px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

.modal-header-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-project-visit-button.hidden {
    display: none !important;
}

.modal-title {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.modal-exit-button {
    background-color: #8b4513;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Pixelify Sans', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.modal-exit-button:hover {
    background-color: #a0522d;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.modal-content {
    width: 100%;
}

.modal-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ====== PROJECT MODALS: layout pro ====== */
.modal:not(.instructions-modal) .modal-content-wrapper{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr; /* texto un poquito más grande */
  gap: 24px;
  align-items: start;
}

/* En pantallas chicas, vuelve a columna */
@media (max-width: 768px){
  .modal:not(.instructions-modal) .modal-content-wrapper{
    grid-template-columns: 1fr;
  }
}





.modal-project-visit-button {
    display: inline-block;
    background-color: #4a90e2;
    color: #fff;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Pixelify Sans', sans-serif;
}

.modal-project-visit-button:hover {
    background-color: #357abd;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    border-color: #fff;
}

.modal-project-description {
    font-size: 17px;
    line-height: 1.8;
    color: #fff;
    text-align: justify;
    margin-bottom: 8px;
}

.modal-project-description p {
    margin-bottom: 16px;
}

.modal-project-image {
    width: 100%;
    text-align: center;
    margin-top: 20px;
}

.modal-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 2px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}


/* Responsive design */
@media (max-width: 768px) {
    .modal {
        width: 95%;
        max-height: 95vh;
    }
    
    .modal-wrapper {
        padding: 16px;
    }
    
    .modal-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .modal-header-buttons {
        align-self: flex-end;
        gap: 8px;
    }
    
    .modal-title {
        font-size: 24px;
    }
    
    .modal-exit-button {
        padding: 10px 16px;
        font-size: 14px;
    }
    
    .modal-project-visit-button {
        padding: 10px 16px;
        font-size: 14px;
    }
    
    .modal-project-description {
        font-size: 14px;
        line-height: 1.6;
    }
}

@media (max-width: 480px) {
    .modal-header-buttons {
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }
    
    .modal-project-visit-button,
    .modal-exit-button {
        width: 100%;
        text-align: center;
    }
}

/* =========================
   TUTORIAL ONLY (Controls)
   ========================= */
.modal.instructions-modal{
  width: min(720px, 92vw);
  max-height: 90vh;

  /* 🎨 colores parque */
  background: #f2e5c8;   /* beige */
  color: #2f5b3f;        /* verde */

  border-radius: 0;
  border: 6px solid #f8f1df;
  box-shadow: 0 18px 45px rgba(0,0,0,0.35);
  overflow: hidden;

  image-rendering: pixelated;
}

/* marco interior */
.modal.instructions-modal::before{
  content: "";
  position: absolute;
  inset: 8px;
  border: 3px solid rgba(47, 91, 63, 0.25);
  pointer-events: none;
}

/* Header tutorial centrado */
.modal.instructions-modal .modal-header{
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 3px solid rgba(47, 91, 63, 0.18);
}

.modal.instructions-modal .modal-title{
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #4f7a3d;
  text-shadow: none;
}

/* ✅ ocultar exit solo aquí */
.modal.instructions-modal .modal-exit-button{
  display: none;
}

/* --------- Controles del tutorial --------- */
.modal.instructions-modal .controls{
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}

.modal.instructions-modal .controls-row{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.modal.instructions-modal .controls-label{
  font-size: 18px;
  letter-spacing: 1px;
  color: #4f7a3d;
}

.modal.instructions-modal .controls-sub,
.modal.instructions-modal .controls-footer{
  font-size: 20px;
  color: #4f7a3d;
}

.modal.instructions-modal .controls-tip{
  font-size: 15px;
  color: #6b5a4a;
  font-style: italic;
  margin: 8px 0;
  padding: 8px 14px;
  background: rgba(201, 130, 67, 0.15);
  border-left: 3px solid #c98243;
  border-radius: 0 6px 6px 0;
}

/* ⌨️ Keys con naranja/café SOLO en tutorial */
.modal.instructions-modal .kbd{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 44px;
  height: 44px;
  padding: 0 12px;

  background: linear-gradient(to bottom, #c98243, #8a4f2b);
  color: #fff6e6;

  border: 3px solid #f8f1df;
  box-shadow:
    0 5px 0 #6b3b1e,
    inset 0 2px 0 rgba(255,255,255,0.25);

  font-size: 20px;
  letter-spacing: 1px;
  border-radius: 0;
  image-rendering: pixelated;

  transition: transform 120ms ease, box-shadow 120ms ease;
}

.modal.instructions-modal .kbd.wide{
  min-width: 160px;
  background: linear-gradient(to bottom, #d89a4a, #b8743a);
}

.modal.instructions-modal .kbd:hover{
  transform: translateY(-2px);
}

.modal.instructions-modal .kbd:active{
  transform: translateY(2px);
  box-shadow:
    0 3px 0 #6b3b1e,
    inset 0 2px 0 rgba(0,0,0,0.2);
}

/* "or" centrado */
.modal.instructions-modal .controls-or{
  font-size: 18px;
  letter-spacing: 1px;
  color: #4f7a3d;
  margin-top: 2px;
  margin-bottom: 2px;
  opacity: 0.95;
}

/* Bloque de acciones (R + Click) */
.modal.instructions-modal .controls-actions{
  margin-top: 6px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.modal.instructions-modal .action{
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.modal.instructions-modal .action-text{
  font-size: 18px;
  color: #4f7a3d;
  letter-spacing: 0.5px;
}

/* Mouse icon pixel-ish */
.modal.instructions-modal .mouse{
  width: 38px;
  height: 50px;
  border: 3px solid #f8f1df;
  background: linear-gradient(to bottom, #c98243, #8a4f2b);
  box-shadow: 0 5px 0 #6b3b1e, inset 0 2px 0 rgba(255,255,255,0.25);
  position: relative;
  display: inline-block;
}

.modal.instructions-modal .mouse-btn{
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 14px;
  background: rgba(255,246,230,0.9);
}

.modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(0,0,0,0.28); /* default */
  /* sin blur por defecto */
}

.modal-overlay.blur{
  background: rgba(0,0,0,0.20);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* =========================
   ABOUT ME MODAL
   ========================= */

.modal:not(.instructions-modal) .about-me{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.modal:not(.instructions-modal) .about-me p{
  font-size: 16px;
  line-height: 1.6;
  color: #fff;
}

/* Links */
.modal:not(.instructions-modal) .about-links{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.modal:not(.instructions-modal) .about-links a{
  text-decoration: none;
  background-color: rgba(255,255,255,0.15);
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  border: 2px solid #fff;
  font-size: 14px;
  transition: all 0.2s ease;
}

.modal:not(.instructions-modal) .about-links a:hover{
  background-color: rgba(255,255,255,0.25);
  transform: translateY(-2px);
}

.cv-sticker{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;

  width: 130px;
  height: 64px;
  display: grid;
  place-items: center;

  text-decoration: none;
  transform: rotate(8deg);
  transform-origin: center;

  /* sticker look */
  background: #f2e5c8;           /* papel */
  border: 4px solid #ffffff;     /* borde blanco */
  box-shadow:
    0 10px 0 #6b3b1e,            /* sombra “bloque” */
    0 18px 30px rgba(0,0,0,0.22);

  /* feeling */
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;

  
}

/* Borde interior tipo sello */
.cv-sticker::before{
  content: "";
  position: absolute;
  inset: 8px;
  border: 3px dashed rgba(138, 79, 43, 0.65);
  pointer-events: none;
}

/* “CV” */
.cv-sticker-text{
  font-size: 14px;     /* más pequeño */
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;
  color: #4f7a3d;
  padding: 0 6px;
}

/* Hover / active: sticker bounce */
.cv-sticker:hover{
  transform: rotate(6deg) translateY(-2px);
  filter: brightness(1.02);
}

.cv-sticker:active{
  transform: rotate(6deg) translateY(4px);
  box-shadow:
    0 6px 0 #6b3b1e,
    0 12px 18px rgba(0,0,0,0.18);
}

/* Tooltip */
.cv-sticker-tooltip{
  position: absolute;
  right: 125px;
  top: 50%;
  transform: translateY(-50%);

  background: rgba(0,0,0,0.55);
  color: #fff;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.cv-sticker:hover .cv-sticker-tooltip{
  opacity: 1;
}


#loader {
  position: fixed;
  inset: 0;
  background: #0f0f0f;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#loader-text {
  color: white;
  font-family: 'Pixelify Sans', monospace;
  font-size: 1.2rem;
}