/* =========================================================
   画面ごとのスタイル：起動・ホーム・一覧・まなぶ・保護者
   値は base.css の変数（--color-* / --radius-* / --space-* …）を使います。
   ========================================================= */

/* =========================================================
   せかい（新しいデザインの基準：design-reference.png）
   空・おか・木・さく・花の背景、木の看板、丸いボタン、くま・うさぎ。
   いまは ホーム・まなぶ一覧・かべをすりぬけろ で使っています。
   ========================================================= */
.kg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.world {
  --hz: 46%;         /* 地平線（空と草のさかい） */
  --tree-h: 40%;     /* 左右の木の高さ */
  --tree-y: 8%;      /* 木の根元が 地平線より どれだけ下か */
  --fence-y: 2%;
  --fence-h: 9%;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.world > div { position: absolute; }
.w-sky { inset: 0; background: linear-gradient(to bottom, #6cbcf0 0%, #a3d8f7 calc(var(--hz) * 0.55), #def3fc var(--hz)); }
.w-cloud { width: clamp(90px, 14vw, 170px); opacity: 0.95; animation: cloud-drift 18s ease-in-out infinite alternate; }
.w-cloud svg, .w-hills svg, .w-trees svg, .w-flowers svg, .w-house svg { display: block; width: 100%; height: 100%; }
.w-cloud.c1 { left: 6%; top: calc(var(--hz) * 0.14); }
.w-cloud.c2 { left: 40%; top: calc(var(--hz) * 0.06); scale: 0.7; animation-duration: 23s; animation-delay: -8s; }
.w-cloud.c3 { right: 8%; top: calc(var(--hz) * 0.22); scale: 0.85; animation-duration: 20s; animation-delay: -4s; }
@keyframes cloud-drift { to { translate: 32px 0; } }
.w-hills { left: -4%; right: -4%; top: calc(var(--hz) - 9%); height: 11%; }
.w-house { width: clamp(60px, 9vw, 110px); aspect-ratio: 100 / 80; right: 22%; top: calc(var(--hz) - clamp(40px, 6vw, 74px)); }
.w-ground {
  left: 0; right: 0; top: var(--hz); bottom: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 85%, rgba(255, 255, 255, 0.14), transparent 70%),
    linear-gradient(to bottom, #a2d877 0%, #8acb62 45%, #79bf52 100%);
}
.w-fence { left: 0; right: 0; top: calc(var(--hz) + var(--fence-y) - var(--fence-h)); height: var(--fence-h); filter: drop-shadow(0 3px 0 rgba(80, 110, 50, 0.25)); }
.w-trees { bottom: calc(100% - var(--hz) - var(--tree-y)); height: var(--tree-h); aspect-ratio: 200 / 240; filter: drop-shadow(0 6px 6px rgba(40, 80, 30, 0.18)); }
.w-trees.l { left: -3%; }
.w-trees.r { right: -3%; }
.w-flowers { bottom: 0; width: clamp(140px, 24vw, 300px); aspect-ratio: 200 / 80; }
.w-flowers.l { left: 0; }
.w-flowers.r { right: 0; }

/* ----- 木の看板 ----- */
.wood-sign { position: relative; display: inline-flex; justify-content: center; }
.ws-board {
  position: relative;
  z-index: 1;
  padding: 0.35em 1.1em 0.4em;
  border-radius: 0.7em;
  font-weight: 900;
  color: #7a4a24;
  letter-spacing: 0.06em;
  text-align: center;
  background:
    radial-gradient(circle at 0.6em 0.6em, #8a5a30 0 0.13em, transparent 0.15em),
    radial-gradient(circle at calc(100% - 0.6em) 0.6em, #8a5a30 0 0.13em, transparent 0.15em),
    repeating-linear-gradient(to bottom, transparent 0 0.9em, rgba(150, 95, 45, 0.13) 0.9em 0.98em),
    linear-gradient(to bottom, #fbdcaa, #efbf7f 60%, #e2a865);
  border: 3px solid #b27843;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.55),
    inset 0 -5px 0 rgba(150, 90, 40, 0.18),
    0 6px 0 #a06a37,
    0 12px 18px rgba(70, 50, 20, 0.25);
}
.ws-post {
  position: absolute;
  z-index: 0;
  top: -0.9em;
  bottom: -0.2em;
  width: 0.55em;
  border-radius: 0.25em;
  background: linear-gradient(to right, #c48a52, #a26a36);
  border: 2px solid #8a5a30;
}
.ws-post.l { left: 12%; }
.ws-post.r { right: 12%; }
.rainbow-text > span { color: var(--c, #7a4a24); -webkit-text-stroke: 0.16em #fff; paint-order: stroke fill; text-shadow: 0 0.06em 0 #a06a37, 0 0.1em 0.12em rgba(80, 50, 20, 0.25); }

/* ----- 丸いボタン（クリーム色・オレンジのふち・厚み） ----- */

/* ----- キャラクター ----- */
.chara { display: block; width: 100%; height: 100%; overflow: visible; }
.chara-btn { position: absolute; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
.chara-btn > svg { animation: chara-breathe 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
.chara-btn.rabbit > svg { animation-duration: 2.6s; animation-delay: -1s; }
@keyframes chara-breathe { 0%, 100% { scale: 1 1; } 50% { scale: 1.02 0.985; } }
.chara-btn.hop { animation: chara-hop 0.5s var(--ease-out); }
@keyframes chara-hop { 35% { translate: 0 -16%; } 70% { translate: 0 2%; } }

/* =========================================================
   ホーム（草原の中に 看板・カード・くま・うさぎ）
   ========================================================= */
.home-screen {
  --size: min(30vw, 44vh, 300px);
  --chara: min(24vw, 34vh, 250px);
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3.4vh, 36px);
  padding: 12px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  overflow: hidden;
}
.home-screen > .world { --hz: 50%; --tree-h: 54%; --tree-y: 10%; --fence-h: 10%; }
.home-sign { z-index: 1; font-size: clamp(30px, 7.6vmin, 68px); animation: sign-drop 0.7s var(--ease-pop) both; }
@keyframes sign-drop { from { translate: 0 -40px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
.home-sign .ws-board { padding: 0.18em 0.8em 0.26em; }
.home-title { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.home-title-sub { font-size: 0.42em; letter-spacing: 0.3em; color: #8a5426; }

/* カードの すぐ横に立つ（画面の はしっこに 追いやらない） */

/* 保護者ボタン：右上の歯車（2秒長押し）。目立ちすぎないように少し小さく */

@media (orientation: portrait) {
  .home-screen { justify-content: flex-start; padding-top: max(22px, 4vh); padding-bottom: calc(var(--chara) * 1.05 + 10px); }

  .home-screen > .world { --hz: 34%; --tree-h: 30%; --tree-y: 4%; --fence-h: 6%; }
  .home-sign { font-size: clamp(30px, 9vw, 56px); margin-bottom: 1vh; }

  .home-screen { --size: min(78vw, 24vh, 340px); --chara: min(38vw, 21vh, 220px); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .home-screen { gap: 10px; padding-top: 8px; }
  .home-sign { font-size: clamp(22px, 7vh, 34px); }
  .home-screen { --size: min(26vw, 52vh, 240px); --chara: min(19vw, 40vh, 170px); }
}

/* =========================================================
   まなぶ一覧（草原の前に、厚みのある白いタイル）
   ========================================================= */
.learn-list { overflow: hidden; }
.learn-list > .world { --hz: 30%; --tree-h: 36%; --tree-y: 4%; --fence-h: 7%; }

.learn-list .list-scroll { position: relative; z-index: 1; display: flex; align-items: center; padding-top: 14px; }

@media (orientation: portrait) {
  .learn-list > .world { --hz: 22%; --tree-h: 20%; --tree-y: 2%; --fence-h: 4%; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .learn-list .list-scroll { padding-top: 8px; }
}

/* 保護者ボタン：目立たない場所に小さく（2秒長押し） */

.hold-ring {
  --p: 0;
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(var(--color-primary) calc(var(--p) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
  mask: radial-gradient(circle, transparent 58%, #000 60%);
  pointer-events: none;
}

/* =========================================================
   一覧（まなぶ・あそぶ）：カードの大きさ・位置をそろえる
   ========================================================= */
.list-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  touch-action: pan-y;
  padding: var(--space-small) var(--gutter) calc(var(--space-xl) + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}

/* ロック中：絵は見える（何のゲームか分かる）。札が角に下がる */

.lock-hint { display: flex; align-items: center; gap: 6px; }
.lock-hint-icon { width: 26px; height: 26px; display: inline-flex; flex: none; color: var(--color-gold); }
.lock-hint-icon .icon g { stroke: var(--color-line); stroke-width: 6; }
.lock-progress { display: inline-flex; flex-wrap: nowrap; gap: 3px; }
.lock-progress .dot { width: 9px; height: 9px; border-radius: 50%; background: #e6dccd; border: 1.5px solid rgba(91, 70, 54, 0.3); }
.lock-progress .dot.on { background: var(--color-primary); border-color: var(--color-primary-deep); }
.lock-progress .bar { display: block; width: 70px; height: 11px; border-radius: 6px; background: #e6dccd; overflow: hidden; border: 1.5px solid rgba(91, 70, 54, 0.3); }
.lock-progress .bar-fill { display: block; height: 100%; background: var(--color-primary); }

@keyframes almost { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(0); } 55% { transform: rotate(-12deg); } 65% { transform: rotate(10deg); } 75% { transform: rotate(0); } }

/* ひらいたばかり：鍵がはずれて、カードが少し跳ねる */

.unlock-fx {
  position: absolute;
  top: -8px; right: -6px;
  z-index: 3;
  width: 40px; height: 40px;
  padding: 7px 8px 8px;
  border-radius: 50%;
  background: var(--color-card);
  border: var(--line-w) solid var(--color-line);
  color: var(--color-gold);
  animation: unlock-open 1.1s ease-in 0.25s forwards;
  pointer-events: none;
}
.unlock-fx .icon g { stroke: var(--color-line); stroke-width: 7; }
.unlock-fx .shackle { transition: transform 0.3s; }
@keyframes unlock-open {
  0% { transform: none; opacity: 1; }
  30% { transform: rotate(-14deg) scale(1.1); opacity: 1; }
  45% { transform: rotate(10deg) scale(1.1); opacity: 1; }
  100% { transform: translateY(-26px) scale(0.6); opacity: 0; }
}
@keyframes unlock-hop { 0%, 100% { transform: none; } 40% { transform: translateY(-12px) rotate(-1.5deg); } 70% { transform: translateY(2px); } }

/* =========================================================
   保護者画面（大人向け：ふつうの文字の大きさ）
   ========================================================= */
.parent-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px var(--gutter) 40px; touch-action: pan-y; -webkit-user-select: text; user-select: text; }
.parent-scroll > * { max-width: 860px; margin-left: auto; margin-right: auto; }

.parent-lead { font-size: 15px; line-height: 1.7; color: var(--color-muted); font-weight: 500; }
.parent-section {
  background: var(--color-card);
  border: var(--line-w-thin) solid var(--color-line-soft);
  border-radius: var(--radius-medium);
  box-shadow: 0 3px 0 rgba(91, 70, 54, 0.08);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.parent-section h2 { margin: 0 0 10px; font-size: 18px; letter-spacing: 0.04em; }
.parent-note { margin: 0 0 12px; font-size: 14px; line-height: 1.7; color: var(--color-muted); font-weight: 500; }
.parent-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.parent-info { margin: 0; padding-left: 1.2em; font-size: 14px; line-height: 1.9; font-weight: 500; }
.setting-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 2px dashed rgba(91, 70, 54, 0.12); cursor: pointer; position: relative; }
.setting-row:first-of-type { border-top: 0; }
.setting-text { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 16px; }
.setting-text small { color: var(--color-muted); font-size: 13px; line-height: 1.5; font-weight: 500; }
.switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch { flex: none; width: 60px; height: 34px; border-radius: 17px; background: #ddd3c6; border: var(--line-w-thin) solid var(--color-line); position: relative; transition: background var(--dur-fast); }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: var(--line-w-thin) solid var(--color-line); transition: transform var(--dur-fast) var(--ease-out); }
.switch-input:checked + .switch { background: var(--color-success); }
.switch-input:checked + .switch::after { transform: translateX(26px); }
.switch-input:focus-visible + .switch { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.table-wrap { overflow-x: auto; margin-bottom: 8px; touch-action: pan-x pan-y; }
.stat-table { width: 100%; border-collapse: collapse; font-size: 14px; font-weight: 500; }
.stat-table th, .stat-table td { padding: 8px; text-align: left; border-bottom: 1.5px solid rgba(91, 70, 54, 0.12); white-space: nowrap; }
.stat-table th { font-size: 12px; color: var(--color-muted); font-weight: 700; }

/* ----- エラー画面 ----- */
.error-screen { align-items: center; justify-content: center; }
.error-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: var(--gutter); text-align: center; }
.error-card .mascot-wrap { width: 140px; }