/* =============================================== */
/* === ICEBERG INTERACTIVE COMPONENT === */
/* =============================================== */

/* ======================== */
/* === MAIN CONTAINER === */
/* ======================== */

.iceberg-container {
    position: relative;
    aspect-ratio: 768 / 1191;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--theme-content-bg);
    border: 2px solid var(--theme-border);
    border-radius: var(--patch-radius);
    transition: all 0.3s ease;
  }
  
  /* ======================== */
  /* === LAYER HEIGHTS === */
  /* ======================== */
  
  .iceberg-layer-tip { --layer-height: 41%; }
  .iceberg-layer-surface { --layer-height: 13%; }
  .iceberg-layer-deep { --layer-height: 12%; }
  .iceberg-layer-twilight { --layer-height: 12%; }
  .iceberg-layer-abyss { --layer-height: 11%; }
  .iceberg-layer-void { --layer-height: 11%; }
  
  /* ======================== */
  /* === LAYER STYLES === */
  /* ======================== */
  
  .iceberg-layer-tip,
  .iceberg-layer-surface,
  .iceberg-layer-deep,
  .iceberg-layer-twilight,
  .iceberg-layer-abyss,
  .iceberg-layer-void {
    height: var(--layer-height);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em;
    position: relative;
    z-index: 2;
    text-align: center;
  }
  
  /* ======================== */
  /* === ENTRY BLOCKS === */
  /* ======================== */
  
  .iceberg-entry {
    display: inline-block;
    font-family: 'Neodgm Pro', monospace;
    font-weight: 600;
    line-height: 1.3;
    padding: 0.4em 0.6em;
    text-align: center;
    white-space: normal;
    word-break: keep-word;
    max-width: 40vw;
    min-width: 70px;
    font-size: clamp(0.65rem, 1.6vw, 1.2rem);
    color: var(--theme-content-bg);
    cursor: pointer;
    transition: color 0.2s ease;
  }
  
  /* ======================== */
  /* === ABOVE WATER ENTRIES === */
  /* ======================== */
  
  .iceberg-layer-tip .iceberg-entry,
  .iceberg-layer-surface:not(.below-water) .iceberg-entry {
    color: var(--theme-text);
  }
  
  .iceberg-layer-tip .iceberg-entry:hover,
  .iceberg-layer-surface:not(.below-water) .iceberg-entry:hover {
    color: var(--theme-primary);
  }
  
  /* ======================== */
  /* === BELOW WATER ENTRIES === */
  /* ======================== */
  
  .iceberg-layer-surface.below-water .iceberg-entry,
  .iceberg-layer-deep .iceberg-entry,
  .iceberg-layer-twilight .iceberg-entry,
  .iceberg-layer-abyss .iceberg-entry,
  .iceberg-layer-void .iceberg-entry {
    color: #ffffff;
  }
  
  /* ======================== */
  /* === DEPTH-SPECIFIC COLORS === */
  /* ======================== */
  
  /* Surface and Deep - Blue highlight */
  .iceberg-layer-surface.below-water .iceberg-entry:hover,
  .iceberg-layer-deep .iceberg-entry:hover {
    color: #4B90FF;
  }
  
  /* Twilight - Purple highlight */
  .iceberg-layer-twilight .iceberg-entry:hover {
    color: #AA77FF;
  }
  
  /* Abyss and Void - Red highlight */
  .iceberg-layer-abyss .iceberg-entry:hover,
  .iceberg-layer-void .iceberg-entry:hover {
    color: #FF5A5A;
  }
  
  /* ======================== */
  /* === RESPONSIVE DESIGN === */
  /* ======================== */
  
  @media (max-width: 768px) {
    .iceberg-container {
      aspect-ratio: 1 / 1.5;
    }
    
    .iceberg-entry {
      font-size: clamp(0.5rem, 3vw, 0.8rem);
      padding: 0.3em 0.4em;
      max-width: 35vw;
      min-width: 50px;
    }
    
    .iceberg-layer-tip,
    .iceberg-layer-surface,
    .iceberg-layer-deep,
    .iceberg-layer-twilight,
    .iceberg-layer-abyss,
    .iceberg-layer-void {
      gap: 0.3em;
      padding: 0.3em;
    }
  }
  
  @media (max-width: 480px) {
    .iceberg-container {
      aspect-ratio: 3 / 4;
    }
    
    .iceberg-entry {
      font-size: clamp(0.4rem, 4vw, 0.7rem);
      padding: 0.2em 0.3em;
      max-width: 30vw;
      min-width: 40px;
    }
    
    /* Adjust layer heights for mobile */
    .iceberg-layer-tip { --layer-height: 35%; }
    .iceberg-layer-surface { --layer-height: 15%; }
    .iceberg-layer-deep { --layer-height: 13%; }
    .iceberg-layer-twilight { --layer-height: 13%; }
    .iceberg-layer-abyss { --layer-height: 12%; }
    .iceberg-layer-void { --layer-height: 12%; }
  }