.minigame-frame {
  display: grid;
  grid-template-rows: auto minmax(320px, 1fr);
  gap: 14px;
  width: 100%;
  min-height: min(680px, calc(100dvh - 110px));
}

.minigame-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.minigame-stage {
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
  border: 3px solid var(--line);
  border-radius: 20px;
  background: #0c1223;
  box-shadow: var(--shadow);
}

.minigame-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.minigame-ui-root {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 380px;
  padding: clamp(18px, 4vw, 42px);
}

.scaffold-game,
.minigame-scaffold {
  display: grid;
  gap: 18px;
  justify-items: center;
  width: min(640px, 100%);
  padding: clamp(20px, 5vw, 46px);
  border: 2px dashed var(--line);
  border-radius: 18px;
  background: rgb(18 25 45 / 92%);
  text-align: center;
}

.scaffold-game__code,
.minigame-scaffold__department {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border: 4px solid var(--accent);
  border-radius: 22px;
  color: var(--accent);
  font-size: 1.7rem;
  font-weight: 1000;
  box-shadow: 8px 8px 0 rgb(120 240 193 / 18%);
}

.minigame-scaffold__department {
  display: grid;
  place-items: center;
}

.minigame-scaffold__department-name,
.minigame-scaffold__goal,
.minigame-scaffold__notice,
.minigame-scaffold__state {
  margin: 0;
}

.minigame-scaffold__department-name,
.minigame-scaffold__notice {
  color: var(--muted);
}

.minigame-scaffold__debug-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.minigame-scaffold__debug-controls button {
  min-height: 48px;
  padding: 10px 18px;
  border: 2px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  background: var(--surface-strong);
  cursor: pointer;
  font-weight: 900;
}

.minigame-scaffold__debug-controls button:first-child {
  border-color: var(--accent);
}

.minigame-scaffold__debug-controls button:last-child {
  border-color: var(--danger);
}

.minigame-scaffold__debug-controls button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.minigame-thumbnail {
  display: block;
  width: min(640px, 100%);
  height: auto;
  margin: 24px auto;
  border: 3px solid var(--line);
  border-radius: 18px;
  image-rendering: pixelated;
}

.result-backdrop {
  position: absolute;
  z-index: 10;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: auto;
  background: rgb(3 6 13 / 78%);
  backdrop-filter: blur(6px);
}

.result-card {
  width: min(520px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 28px;
  border: 3px solid var(--accent);
  border-radius: 18px;
  background: #141d34;
  box-shadow: var(--shadow);
  text-align: center;
}

.result-card[data-status="FAIL"] {
  border-color: var(--danger);
}

.result-metrics {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 18px;
  max-height: 180px;
  margin: 18px 0;
  overflow-y: auto;
  text-align: left;
}

.result-metrics dt {
  color: var(--muted);
}

.result-metrics dd {
  margin: 0;
  color: var(--text);
  font-weight: 800;
  text-align: right;
}

.control-list {
  display: grid;
  gap: 8px;
  padding-left: 1.2rem;
  color: var(--muted);
  text-align: left;
}

@media (max-width: 680px) {
  .minigame-frame {
    min-height: calc(100dvh - 92px);
  }

  .minigame-stage,
  .minigame-ui-root {
    min-height: 430px;
  }
}

/* CSE · Code Heart: Unlock! */
/* =========================================================
   [MINIGAME 03] Code Heart: Unlock! (코드 하트 전용 스타일)
   ========================================================= */

/* 1. 최상위 래퍼 컨테이너 (PC: 440px x 920px) */
.code-heart-game {
    position: relative;
    width: 100%;
    max-width: 440px;
    height: 920px;
    max-height: 95vh;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 20px 18px;
    background: #fdf0f5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    border: 3px solid #ffd1dc;
    border-radius: 28px;
    box-shadow: 0 16px 44px rgba(255, 64, 129, 0.2);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  .code-heart-game * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  /* 2. 상단 헤더 */
  .code-heart-game .ch-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ff5e9a;
    color: white;
    padding: 10px 16px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: bold;
    flex-shrink: 0;
  }
  
  .code-heart-game .ch-timer {
    background: rgba(0, 0, 0, 0.2);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
    color: #ffeb3b;
  }
  
  /* 3. 손님 & 카운터 씬 (상대 위치 설정으로 레시피북 우측 상단 고정) */
  .code-heart-game .ch-counter-scene {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    padding: 18px 16px 14px 16px;
    border-radius: 20px;
    border: 2px solid #ffd1dc;
    box-shadow: inset 0 2px 6px rgba(255, 182, 193, 0.2);
    flex-shrink: 0;
    min-height: 175px;
  }
  
  .code-heart-game .ch-customer-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 95px;
    flex-shrink: 0;
  }
  
  .code-heart-game .ch-person-silhouette {
    width: 80px;
    height: 98px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
  }
  
  .code-heart-game .ch-person-silhouette img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  .code-heart-game .ch-sil-head {
    width: 34px;
    height: 34px;
    background-color: #546e7a;
    border-radius: 50%;
    margin-bottom: 4px;
  }
  
  .code-heart-game .ch-sil-body {
    width: 66px;
    height: 44px;
    background-color: #546e7a;
    border-radius: 32px 32px 6px 6px;
  }
  
  .code-heart-game .ch-customer-name {
    font-size: 12px;
    font-weight: 800;
    color: #c2185b;
    margin-top: 8px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  
  /* 대사 말풍선 (가로 폭 최대 확장 및 우측 상단 레시피북 공간 고려 패딩) */
  .code-heart-game .ch-order-bubble {
    flex: 1;
    width: 100%;
    background: #fff9c4;
    border: 1.5px solid #fbc02d;
    padding: 14px 16px;
    padding-right: 28px; /* 레시피북 버튼과 글자 겹침 방지 */
    border-radius: 16px;
    font-size: 12.5px;
    color: #333;
    line-height: 1.45;
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  }
  
  .code-heart-game .ch-order-bubble::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 7px 8px 7px 0;
    border-style: solid;
    border-color: transparent #fbc02d transparent transparent;
  }
  
  .code-heart-game .ch-order-bubble::after {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px 7px 6px 0;
    border-style: solid;
    border-color: transparent #fff9c4 transparent transparent;
  }
  
  /* 레시피북 버튼: 캐릭터 창 우측 상단에 작게 고정 */
  .code-heart-game .ch-btn-recipe-trigger {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 60px;
    height: 30px;
    background: linear-gradient(135deg, #ba68c8, #7b1fa2);
    border-radius: 8px;
    border: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(123, 31, 162, 0.3);
    transition: transform 0.15s ease;
    z-index: 2;
  }
  
  .code-heart-game .ch-btn-recipe-trigger:hover { filter: brightness(1.05); }
  .code-heart-game .ch-btn-recipe-trigger:active { transform: scale(0.92); }
  .code-heart-game .ch-book-icon { font-size: 13px; }
  .code-heart-game .ch-book-text { font-size: 9.5px; font-weight: bold; margin-top: 0; }
  
  /* 4. 작업대 슬롯 (git add) */
  .code-heart-game .ch-workspace {
    background: #e8f5e9;
    border: 2px solid #81c784;
    border-radius: 16px;
    padding: 10px 14px;
    flex-shrink: 0;
  }
  
  .code-heart-game .ch-workspace-top {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: bold;
    color: #2e7d32;
    margin-bottom: 8px;
  }
  
  .code-heart-game .ch-btn-reset {
    background: #ffebee;
    border: 1px solid #ef5350;
    color: #c62828;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 10.5px;
    cursor: pointer;
  }
  
  .code-heart-game .ch-slots-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  
  .code-heart-game .ch-slot-tile {
    background: #ffffff;
    border: 1.5px dashed #a5d6a7;
    border-radius: 12px;
    padding: 10px 4px;
    text-align: center;
    min-height: 58px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .code-heart-game .ch-slot-tile.filled {
    border: 1.5px solid #2e7d32;
    background: #f1f8e9;
  }
  
  .code-heart-game .ch-slot-type {
    font-size: 10.5px;
    color: #757575;
  }
  
  .code-heart-game .ch-slot-val {
    font-size: 12px;
    font-weight: bold;
    color: #bdbdbd;
    margin-top: 3px;
  }
  
  .code-heart-game .ch-slot-tile.filled .ch-slot-val {
    color: #1b5e20;
  }
  
  /* 5. 상태 피드백 메시지 바 */
  .code-heart-game .ch-feedback {
    text-align: center;
    font-size: 12.5px;
    font-weight: bold;
    padding: 8px 12px;
    border-radius: 10px;
    background: #fff;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1.3;
  }
  
  .code-heart-game .ch-feedback.success {
    color: #1b5e20;
    background: #c8e6c9;
    border: 1px solid #81c784;
  }
  
  .code-heart-game .ch-feedback.error {
    color: #b71c1c;
    background: #ffcdd2;
    border: 1.5px solid #e53935;
  }
  
  .code-heart-game .ch-shake {
    animation: ch-vibrate 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  }
  
  @keyframes ch-vibrate {
    10%, 90% { transform: translate3d(-2px, 0, 0); }
    20%, 80% { transform: translate3d(4px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
    40%, 60% { transform: translate3d(6px, 0, 0); }
  }
  
  /* 6. 재료 보관함 & PUSH 버튼 */
  .code-heart-game .ch-tray-section {
    display: flex;
    gap: 10px;
    height: 210px;
    flex-shrink: 0;
  }
  
  .code-heart-game .ch-materials-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 6px;
  }
  
  .code-heart-game .ch-btn-material {
    border-radius: 10px;
    padding: 0 4px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.08s ease, filter 0.08s ease;
    border-width: 1px;
    border-style: solid;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .code-heart-game .ch-btn-material:hover { filter: brightness(0.97); }
  .code-heart-game .ch-btn-material:active { transform: scale(0.94); }
  
  .code-heart-game .ch-btn-material[data-cat="lang"]   { border-color: #ffe082; background: #fffde7; color: #e65100; }
  .code-heart-game .ch-btn-material[data-cat="engine"] { border-color: #90caf9; background: #e3f2fd; color: #1565c0; }
  .code-heart-game .ch-btn-material[data-cat="lib"]    { border-color: #ce93d8; background: #f3e5f5; color: #6a1b9a; }
  .code-heart-game .ch-btn-material[data-cat="tool"]   { border-color: #a5d6a7; background: #e8f5e9; color: #2e7d32; }
  
  .code-heart-game .ch-btn-unlock {
    width: 90px;
    height: 100%;
    background: linear-gradient(180deg, #ff4081, #d81b60);
    border: none;
    border-radius: 14px;
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(216, 27, 96, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
  }
  
  .code-heart-game .ch-btn-unlock:hover { filter: brightness(1.05); }
  .code-heart-game .ch-btn-unlock:active { transform: scale(0.94); }
  .code-heart-game .ch-btn-unlock small { font-size: 10px; color: #ffeb3b; margin-top: 3px; }
  
  /* 7. 레시피 및 결과 모달 */
  .code-heart-game .ch-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 100;
  }

  .code-heart-game .ch-modal-backdrop[hidden] {
    display: none !important;
  }
  
  .code-heart-game .ch-modal-card {
    background: #ffffff;
    border: 3px solid #ba68c8;
    border-radius: 20px;
    padding: 18px;
    width: 100%;
    max-width: 350px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
  }
  
  .code-heart-game .ch-modal-card h3 {
    margin: 0 0 12px 0;
    font-size: 15px;
    color: #6a1b9a;
    text-align: center;
  }
  
  .code-heart-game .ch-recipe-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
    max-height: 55vh;
    overflow-y: auto;
  }
  
  .code-heart-game .ch-recipe-row {
    background: #f8f9fa;
    border: 1px solid #eee;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
  }
  
  .code-heart-game .ch-recipe-row strong {
    color: #d81b60;
    display: block;
    margin-bottom: 3px;
  }
  
  .code-heart-game .ch-btn-close {
    width: 100%;
    background: #ba68c8;
    color: white;
    border: none;
    border-radius: 10px;
    padding: 10px;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
  }
  
  .code-heart-game .ch-result-card {
    border-color: #ff4081;
    border-radius: 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .code-heart-game .ch-result-title {
    font-size: 16px;
    font-weight: 800;
    padding-bottom: 6px;
    border-bottom: 2px solid #fce4ec;
  }
  
  .code-heart-game .ch-result-title.success { color: #2e7d32; }
  .code-heart-game .ch-result-title.error   { color: #c62828; }
  
  .code-heart-game .ch-result-desc {
    font-size: 13px;
    color: #555;
    line-height: 1.45;
  }
  
  .code-heart-game .ch-result-score {
    font-size: 15px;
    font-weight: 800;
    background: #fce4ec;
    border: 1.5px dashed #f48fb1;
    color: #ad1457;
    border-radius: 12px;
    padding: 10px;
  }
  
  .code-heart-game .ch-result-btn-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
  }
  
  .code-heart-game .ch-btn-action {
    width: 100%;
    padding: 11px;
    font-size: 13.5px;
    font-weight: 800;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    color: #ffffff;
  }
  
  .code-heart-game .ch-btn-action.success {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    box-shadow: 0 4px 10px rgba(46, 125, 50, 0.3);
  }
  
  .code-heart-game .ch-btn-action.retry {
    background: linear-gradient(135deg, #ff9800, #f57c00);
    box-shadow: 0 4px 10px rgba(245, 124, 0, 0.3);
  }
  
  .code-heart-game .ch-btn-action:active { transform: scale(0.96); }
  
  .code-heart-game .hidden {
    display: none !important;
  }
  
  /* =========================================================
     [모바일 반응형]
     ========================================================= */
  @media screen and (max-width: 480px) {
    .code-heart-game {
      width: 95%;
      max-width: 420px;
      height: auto;
      max-height: 850px;
      border-radius: 26px;
      border: 2.5px solid #ffd1dc;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      margin: auto;
      padding: 16px 16px;
      justify-content: space-between;
      gap: 12px;
    }
  
    /* 캐릭터 & 대사 영역 */
    .code-heart-game .ch-counter-scene {
      min-height: 165px;
      padding: 16px 14px 12px 14px;
      gap: 12px;
    }
  
    .code-heart-game .ch-customer-unit {
      width: 95px;
    }
  
    .code-heart-game .ch-person-silhouette {
      width: 78px;
      height: 96px;
    }
  
    .code-heart-game .ch-sil-head {
      width: 32px;
      height: 32px;
    }
  
    .code-heart-game .ch-sil-body {
      width: 64px;
      height: 42px;
      border-radius: 32px 32px 6px 6px;
    }
  
    .code-heart-game .ch-btn-recipe-trigger {
      top: 8px;
      right: 10px;
      width: 60px;
      height: 26px;
    }
  
    /* 재료 트레이 */
    .code-heart-game .ch-tray-section {
      height: 195px;
      flex-shrink: 0;
    }
  
    .code-heart-game .ch-materials-grid {
      gap: 5px;
    }
  
    .code-heart-game .ch-btn-material {
      font-size: 11.5px;
    }
  
    .code-heart-game .ch-btn-unlock {
      width: 84px;
      font-size: 12px;
    }
  }

/* Integrated host sizing: scale the original 440 × 920 frame by width and scroll vertically. */
.minigame-ui-root.cse-ui-root {
  position: absolute;
  inset: 0;
  align-content: start;
  justify-items: center;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  scrollbar-gutter: stable;
}

.cse-ui-root .cse-fixed-frame-viewport {
  align-self: start;
  justify-self: center;
  margin: 0 auto;
}

.cse-ui-root .code-heart-game {
  width: 440px;
  max-width: none;
  height: 920px;
  min-height: 920px;
  max-height: none;
  margin: 0;
  padding: 20px 18px;
  gap: 14px;
  border: 3px solid #ffd1dc;
  border-radius: 28px;
  box-shadow: 0 16px 44px rgba(255, 64, 129, 0.2);
}

.cse-ui-root .code-heart-game .ch-counter-scene {
  min-height: 175px;
  padding: 18px 16px 14px;
  gap: 14px;
}

.cse-ui-root .code-heart-game .ch-person-silhouette {
  width: 80px;
  height: 98px;
}

.cse-ui-root .code-heart-game .ch-sil-head {
  width: 34px;
  height: 34px;
}

.cse-ui-root .code-heart-game .ch-sil-body {
  width: 66px;
  height: 44px;
}

.cse-ui-root .code-heart-game .ch-btn-recipe-trigger {
  top: 10px;
  right: 12px;
  width: 60px;
  height: 30px;
}

.cse-ui-root .code-heart-game .ch-tray-section {
  height: 210px;
}

.cse-ui-root .code-heart-game .ch-materials-grid {
  gap: 6px;
}

.cse-ui-root .code-heart-game .ch-btn-material {
  font-size: 12px;
}

.cse-ui-root .code-heart-game .ch-btn-unlock {
  width: 90px;
  font-size: 12.5px;
}

.code-heart-game .ch-recipe-detail {
  display: block;
}

.result-card[data-mini-game-id="computer-code-heart"] {
  border-color: #ff4081;
  border-radius: 22px;
  background: #fff;
  color: #333;
}

.result-card[data-mini-game-id="computer-code-heart"] h2 {
  padding-bottom: 6px;
  border-bottom: 2px solid #fce4ec;
  color: #c62828;
}

.result-card[data-mini-game-id="computer-code-heart"][data-status="CLEAR"] h2 {
  color: #2e7d32;
}

.result-card[data-mini-game-id="computer-code-heart"] .muted,
.result-card[data-mini-game-id="computer-code-heart"] .result-metrics dt {
  color: #555;
}

.result-card[data-mini-game-id="computer-code-heart"] .result-metrics dd {
  color: #333;
}

.result-card[data-mini-game-id="computer-code-heart"] .button--primary {
  border-color: #ff4081;
  background: linear-gradient(135deg, #ff4081, #d81b60);
  color: #fff;
}

/* DS · Number Baseball */
.nb-container {
  display: grid;
  gap: 18px;
  width: min(680px, 100%);
  padding: clamp(18px, 4vw, 34px);
  border: 2px solid #32d9e6;
  border-radius: 22px;
  background: linear-gradient(160deg, #101a31, #13102c);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
}

.nb-header,
.nb-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.nb-epoch-text {
  color: #7df6ff;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.nb-progress-wrapper {
  flex: 1;
}

.nb-progress-bar {
  width: 100%;
  accent-color: #32d9e6;
}

.nb-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(56px, 86px));
  gap: 12px;
  justify-content: center;
}

.nb-slot {
  display: grid;
  min-height: 78px;
  place-items: center;
  border: 2px solid #8d76ff;
  border-radius: 16px;
  background: #0b1022;
  color: #fff;
  font-size: clamp(1.6rem, 6vw, 2.5rem);
  font-weight: 900;
}

.nb-history {
  display: grid;
  gap: 6px;
  min-height: 92px;
  max-height: 170px;
  overflow-y: auto;
  padding: 10px;
  border-radius: 12px;
  background: rgba(4, 8, 20, 0.7);
}

.nb-history-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.nb-history-guess {
  color: #7df6ff;
  font-weight: 800;
}

.nb-history-result {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3em;
}

.nb-history-fit {
  color: #0f0;
}

.nb-history-shift {
  color: #ff0;
}

.nb-history-outlier {
  color: #f0f;
}

.nb-history-separator {
  color: #d7dbea;
}

.nb-feedback {
  min-height: 1.5em;
  margin: 0;
  color: #ffb5dd;
  text-align: center;
}

.nb-controls {
  display: grid;
  gap: 12px;
}

.nb-keypad {
  display: grid;
  grid-template-columns: repeat(5, minmax(44px, 1fr));
  gap: 8px;
}

.nb-key,
.nb-btn-delete,
.nb-btn-submit {
  min-height: 48px;
  border: 1px solid #5d6d9a;
  border-radius: 12px;
  background: #202d50;
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.nb-btn-submit {
  flex: 1;
  border-color: #32d9e6;
  background: #116374;
}

.nb-btn-delete {
  flex: 1;
}

.nb-key:disabled,
.nb-btn-delete:disabled,
.nb-btn-submit:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

/* CS · CLICK to PURIFY MVP */
.click-to-purify {
  display: grid;
  gap: 16px;
  width: min(620px, 100%);
  padding: clamp(20px, 5vw, 42px);
  border: 2px solid #ff4f9f;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0%, rgba(151, 57, 255, 0.35), transparent 45%),
    #090d1d;
  box-shadow: 0 0 38px rgba(255, 79, 159, 0.22);
  text-align: center;
}

.click-to-purify h2 {
  margin: 0;
  color: #ff7fbc;
  letter-spacing: 0.08em;
}

.click-to-purify__notice {
  margin: 0;
  color: #b7bfd6;
  font-size: 0.88rem;
}

.click-to-purify__state,
.click-to-purify__progress,
.click-to-purify__feedback {
  min-height: 1.4em;
  margin: 0;
}

.click-to-purify__progress {
  color: #7df6ff;
}

.click-to-purify__threat {
  display: grid;
  min-height: 116px;
  margin: 0;
  place-items: center;
  border: 1px solid rgba(255, 79, 159, 0.7);
  border-radius: 50%;
  background: rgba(255, 79, 159, 0.08);
  color: #fff;
  font-weight: 800;
}

.click-to-purify__action {
  min-height: 64px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #ff4f9f, #7d5cff);
  color: #fff;
  font: inherit;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  cursor: pointer;
  box-shadow: 0 8px 0 #40185e;
}

.click-to-purify__action:active:not(:disabled) {
  transform: translateY(5px);
  box-shadow: 0 3px 0 #40185e;
}

.click-to-purify__action:disabled {
  cursor: not-allowed;
  filter: grayscale(0.7);
  opacity: 0.5;
}

.click-to-purify__feedback {
  color: #ffe17a;
  font-weight: 800;
}

.click-to-purify--mvp {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  width: auto;
  padding: clamp(12px, 2.4vw, 24px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  text-align: left;
}

.click-to-purify--mvp .click-to-purify__hud {
  align-self: flex-start;
  display: grid;
  gap: 3px;
  max-width: min(520px, calc(100% - 24px));
  padding: 10px 14px;
  border: 1px solid rgb(116 255 242 / 50%);
  border-radius: 12px;
  background: rgb(5 8 17 / 78%);
  backdrop-filter: blur(6px);
}

.click-to-purify--mvp h2 {
  font-size: clamp(0.9rem, 2.2vw, 1.2rem);
}

.click-to-purify--mvp .click-to-purify__state,
.click-to-purify--mvp .click-to-purify__progress,
.click-to-purify--mvp .click-to-purify__lock {
  min-height: 0;
  margin: 0;
  font-size: clamp(0.72rem, 1.8vw, 0.92rem);
}

.click-to-purify--mvp .click-to-purify__lock {
  min-height: 1.2em;
  color: #f1c0ff;
  font-weight: 900;
}

.click-to-purify--mvp .click-to-purify__feedback {
  align-self: center;
  min-height: 1.4em;
  margin: auto 0 12px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgb(5 8 17 / 72%);
  text-align: center;
}

.click-to-purify--mvp .click-to-purify__action {
  align-self: flex-end;
  width: min(360px, 100%);
  min-height: 58px;
  margin-inline: auto;
  pointer-events: auto;
}

@media (max-width: 560px), (max-height: 560px) {
  .click-to-purify--mvp {
    padding: 10px;
  }

  .click-to-purify--mvp .click-to-purify__hud {
    padding: 7px 10px;
  }

  .click-to-purify--mvp .click-to-purify__feedback {
    margin-bottom: 6px;
  }

  .click-to-purify--mvp .click-to-purify__action {
    min-height: 50px;
  }
}