/* 고인물들을 위한 네모네모 로직 */
:root {
  --nn-bg: #0b0c10;
  --nn-panel: #14161d;
  --nn-line: #23262f;
  --nn-edge: #3d4150;
  --nn-ink: #e8eaf0;
  --nn-dim: #8b90a0;
  --nn-gold: #e8c46a;
  --nn-fill: #e8eaf0;
}
.nn-root {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding-top: var(--pium-header-h, 76px);
  padding-bottom: var(--pium-footer-h, 60px);
  color: var(--nn-ink);
  font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif;
  -webkit-user-select: none; user-select: none;
}

/* ── 메뉴 계열 ── */
.nn-menu { flex: 1; overflow-y: auto; padding: 26px 20px 30px; -webkit-overflow-scrolling: touch; }
.nn-wrap { max-width: 560px; margin: 0 auto; }
.nn-title { margin: 10px 0 6px; font-size: clamp(23px, 6.4vw, 31px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.nn-lede { margin: 0 0 24px; font-size: 14px; line-height: 1.7; color: var(--nn-dim); }
.nn-h { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--nn-dim); }
.nn-btn {
  display: block; width: 100%; margin: 0 0 10px; padding: 16px 18px;
  border: 1px solid var(--nn-edge); border-radius: 14px;
  background: var(--nn-panel); color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.nn-btn:active { background: #1b1e27; }
.nn-btn.is-on { border-color: var(--nn-gold); background: rgba(232, 196, 106, 0.08); }
.nn-btn.is-on .nn-btn-n { color: var(--nn-gold); }
.nn-btn-n { font-size: 17px; font-weight: 700; }
.nn-btn-s { margin-top: 4px; font-size: 13px; color: var(--nn-dim); }
.nn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.nn-cell {
  padding: 16px 8px; border: 1px solid var(--nn-edge); border-radius: 13px;
  background: var(--nn-panel); color: inherit; font: inherit; cursor: pointer; text-align: center;
}
.nn-cell:active { background: #1b1e27; }
.nn-cell-n { font-size: 17px; font-weight: 700; }
.nn-cell-s { margin-top: 5px; font-size: 12px; color: var(--nn-dim); }
.nn-cell.is-done { border-color: var(--nn-gold); }
.nn-cell.is-done .nn-cell-s { color: var(--nn-gold); }
.nn-back {
  margin: 0 0 18px; padding: 8px 14px; border: 1px solid var(--nn-edge); border-radius: 999px;
  background: transparent; color: var(--nn-dim); font: inherit; font-size: 13px; cursor: pointer;
}

/* ── 플레이 ── */
.nn-play { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.nn-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--nn-line); background: var(--nn-panel);
}
.nn-bar-t { flex: 1; text-align: center; font-size: 14px; font-weight: 700; letter-spacing: 0.01em; }
.nn-ib {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 34px; padding: 0;
  border: 1px solid var(--nn-edge); border-radius: 10px;
  background: transparent; color: var(--nn-dim); cursor: pointer;
}
.nn-ib.is-on { border-color: var(--nn-gold); color: var(--nn-gold); background: rgba(232, 196, 106, 0.10); }
.nn-ib:disabled { opacity: 0.35; }
.nn-ib-t { width: auto; padding: 0 12px; font: inherit; font-size: 13px; }
.nn-ic { width: 19px; height: 19px; display: block; }
.nn-canvas { flex: 1; min-height: 0; display: block; width: 100%; touch-action: none; }
.nn-tools {
  display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
  padding: 9px 12px; border-top: 1px solid var(--nn-line); background: var(--nn-panel);
}
.nn-sep { width: 1px; height: 22px; background: var(--nn-line); margin: 0 3px; }
.nn-bar-pad { width: 38px; }

/* ── 완성 ── */
.nn-done {
  position: absolute; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: rgba(11, 12, 16, 0.94); text-align: center; padding: 24px;
}
.nn-done-t { font-size: clamp(26px, 8vw, 38px); font-weight: 800; color: var(--nn-gold); letter-spacing: 0.02em; }
.nn-done-s { font-size: 14px; color: var(--nn-dim); margin-top: -6px; }
.nn-done-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.nn-done-row .nn-ib-t { height: 42px; border-radius: 12px; color: var(--nn-ink); }