/* =========================================================
   おうちのひと モード（親モード）: ロック画面＋設定ダイアログ
   なつ（cicada）／あき（mushi）共通。パチモンは monster.css 内に同等の定義あり。
   ※ ダイアログ/ロックカードは 明るい背景なので、ページのテーマ変数（--text-main 等・
      夜ページでは 明るい色）を使わず、ここ専用の暗い文字色を使う（どのテーマでも読める）。
   ========================================================= */
.lock-overlay, .parent-dialog { --pm-text: #33402c; --pm-sub: #607152; }

.lock-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(120% 80% at 50% 30%, rgba(60, 110, 80, 0.55), transparent 70%),
    linear-gradient(180deg, rgba(20, 50, 30, 0.82), rgba(20, 40, 60, 0.9));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.lock-overlay[hidden] { display: none; }
.lock-card {
  width: min(340px, 90vw);
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  padding: 26px 22px 22px;
  text-align: center;
}
.lock-emoji { font-size: 54px; line-height: 1; }
.lock-title { font-size: 20px; font-weight: 800; margin-top: 8px; color: var(--pm-text); }
.lock-msg { font-size: 13.5px; line-height: 1.8; color: var(--pm-sub); margin-top: 8px; white-space: pre-line; }
.lock-parent {
  margin-top: 16px;
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  color: var(--pm-text);
  background: #f1faec;
  border: 1.5px solid #d7e8ca;
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
}
.lock-parent:active { transform: scale(0.97); }

.parent-dialog {
  width: min(440px, 92vw);
  max-height: 88vh;
  padding: 0;
  border: none;
  border-radius: 18px;
  background: #fff;
  color: var(--pm-text);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.parent-dialog::backdrop { background: rgba(20, 40, 30, 0.5); backdrop-filter: blur(2px); }
.pd-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid #e4efd9;
}
.pd-head h2 { font-size: 16px; font-weight: 800; }
.pd-x {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid #dceccf; background: #f1faec; color: var(--pm-text);
  font-size: 14px; cursor: pointer;
}
.pd-body { padding: 14px 16px 18px; overflow-y: auto; max-height: calc(88vh - 56px); }
.pd-sec { padding: 10px 0; border-bottom: 1px dashed #e0ecd4; }
.pd-toggle { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14.5px; cursor: pointer; }
.pd-toggle input { width: 20px; height: 20px; accent-color: #4fa24a; }
.pd-sub { margin: 8px 0 2px; padding-left: 4px; }
.pd-sub.off { display: none; }
.pd-note { font-size: 12px; color: var(--pm-sub); line-height: 1.7; margin-top: 6px; }
.pd-note.tiny { font-size: 11px; opacity: 0.85; }
.pd-err { font-size: 12.5px; color: #c0392b; font-weight: 800; margin-top: 6px; }
.pin-input {
  display: block; width: 160px; margin: 12px auto 4px; text-align: center;
  font-size: 30px; font-weight: 800; letter-spacing: 0.4em; font-family: inherit;
  padding: 8px 10px; border: 2px solid #cfe3c2; border-radius: 14px; color: var(--pm-text);
}
.pin-input:focus { outline: 3px solid #9bd36a; outline-offset: 1px; }
.pd-row { display: flex; gap: 8px; margin-top: 14px; justify-content: center; }
.pd-row.wrap { flex-wrap: wrap; }
.pd-btn {
  font-family: inherit; font-weight: 800; font-size: 14px; color: var(--pm-text);
  background: #fff; border: 1.5px solid #d7e8ca; border-radius: 12px; padding: 10px 16px; cursor: pointer;
}
.pd-btn.small { font-size: 13px; padding: 7px 12px; }
.pd-btn.primary { background: linear-gradient(145deg, #ffe27a, #ffbe3d); border-color: #e9a92f; color: #3a2a1e; }
.pd-btn:active { transform: scale(0.97); }
.pd-link { background: none; border: none; color: #1f7b46; font: inherit; font-size: 12px; font-weight: 800; text-decoration: underline; cursor: pointer; padding: 0; }
.pd-mins { display: flex; flex-wrap: wrap; gap: 6px; }
.min-btn {
  font-family: inherit; font-weight: 800; font-size: 13px; color: var(--pm-sub);
  background: #f1faec; border: 1.5px solid #dceccf; border-radius: 999px; padding: 7px 14px; cursor: pointer;
}
.min-btn.on { color: #3a2a1e; background: linear-gradient(145deg, #ffe27a, #ffbe3d); border-color: #e9a92f; }
.pwin { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.pwin-s, .pwin-e { font-family: inherit; font-size: 14px; padding: 6px 8px; border: 1.5px solid #cfe3c2; border-radius: 10px; color: var(--pm-text); }
.pwin-tilde { color: var(--pm-sub); font-weight: 800; }
.pwin-del { margin-left: auto; width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid #eecccc; background: #fff5f5; color: #c0392b; font-size: 13px; cursor: pointer; }

/* =========================================================
   残り時間インジケーター（YouTube Kids ふう・ほんのり）
   1にちの利用リミットが ON のときだけ、画面上部の 細いバーが 減っていくだけの
   うっすら表示。のこりが へると 緑→黄→赤。
   ========================================================= */
.pm-timebar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  z-index: 900;
  pointer-events: none;
  background: rgba(30, 50, 20, 0.12);
}
.pm-timebar[hidden] { display: none; }
.pm-timebar-fill {
  height: 100%;
  width: 100%;
  background: #5fc061;
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 6px rgba(95, 192, 97, 0.5);
  transition: width 0.8s linear, background 0.5s ease;
}
.pm-timebar.warn .pm-timebar-fill { background: #f2b23c; box-shadow: 0 0 6px rgba(242, 178, 60, 0.5); }
.pm-timebar.crit .pm-timebar-fill { background: #e2564b; box-shadow: 0 0 8px rgba(226, 86, 75, 0.6); }

@media (prefers-reduced-motion: reduce) {
  .pm-timebar-fill { transition: none; }
}