/* home.css — the child picker, the child home screen (header, ribbon strip,
   subject tiles) and the avatar. Shapes only; a course's colors come from the
   --tile-* tokens in css/subjects/<name>.css. Sampled from the Oct 20 mockups. */

/* ---------- Avatar (picker card + home header) ---------- */

.avatar{ position: relative; display: inline-block; flex: none; }
.avatar-face{
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #f7e3c8; overflow: hidden;
}
.avatar-face svg{ width: 84%; height: 84%; display: block; }
.avatar-initial{ font-family: var(--font-display); font-weight: 800; color: var(--teal-dark); }
.avatar-companion{
  position: absolute; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 3px solid transparent; box-sizing: content-box;
}
.avatar-companion svg{ width: 80%; height: 80%; }

.avatar-lg .avatar-face{ width: 150px; height: 150px; }
.avatar-lg .avatar-initial{ font-size: 64px; }
.avatar-lg .avatar-companion{ width: 96px; height: 96px; right: -44px; bottom: -14px; }
.avatar-lg{ margin-right: 40px; }

.avatar-sm .avatar-face{ width: 46px; height: 46px; }
.avatar-sm .avatar-initial{ font-size: 22px; }
.avatar-sm .avatar-companion{ display: none; }

/* ---------- Child picker ---------- */

.picker-screen{ position: relative; overflow: hidden; }
.picker-rings{
  position: absolute; top: -130px; right: -90px; width: 440px; height: 440px;
  pointer-events: none;
}
.picker-wrap{
  position: relative; flex: 1; width: 100%; max-width: 1400px; margin: 0 auto;
  padding: 36px 40px 28px; display: flex; flex-direction: column; gap: 22px;
}
.wordmark{
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--teal-dark);
}
.wordmark svg{ width: 42px; height: 42px; }
.picker-wrap h1{
  font-size: clamp(34px, 6vw, 58px); color: var(--teal-dark); margin: 6px 0 4px; line-height: 1.05;
}
.child-grid{ display: flex; flex-direction: column; gap: 26px; }
.child-card{
  --card: var(--teal);
  display: flex; align-items: center; gap: 24px;
  background: var(--card); color: var(--cream-card);
  border-radius: 44px; padding: 34px 44px;
  box-shadow: 0 10px 0 color-mix(in srgb, var(--card) 70%, #000);
  cursor: pointer; transition: transform .12s;
}
.child-card:hover{ transform: translateY(-2px); }
.child-card:active{ transform: translateY(4px); box-shadow: 0 6px 0 color-mix(in srgb, var(--card) 70%, #000); }
.child-card:focus-visible{ outline: 4px solid var(--gold); outline-offset: 4px; }
.child-text{ flex: 1; min-width: 0; }
.child-name{
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(44px, 8vw, 84px); line-height: 1; letter-spacing: .5px;
}
.child-sub{ font-weight: 700; font-size: clamp(16px, 2.2vw, 24px); margin-top: 8px; opacity: .78; }

.picker-footer{ display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; }
.footer-btn{
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--cream-card); color: var(--teal-dark);
  border: 2.5px solid var(--tan-line); border-radius: 20px;
  padding: 14px 24px; font-weight: 800; font-size: 17px;
}
.footer-btn:hover{ background: #fff; }

/* ---------- Child home: header ---------- */

.home-header{
  background: var(--teal-dark); color: #fff;
  padding: 22px 40px 22px;
  padding-top: calc(22px + env(safe-area-inset-top, 0px));
}
.home-top{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.home-top .back-btn{
  background: rgba(255,255,255,0.14); border: none; color: #fff; border-radius: 16px;
  width: 50px; height: 50px; font-size: 24px; display: flex; align-items: center; justify-content: center;
}
.home-top .back-btn:hover{ background: rgba(255,255,255,0.26); }
.home-top .greeting{
  font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 4vw, 38px); line-height: 1.05;
}
.home-hint{ flex: 1; min-width: 220px; font-size: 14px; color: #cfe3dd; line-height: 1.4; }
.pill-btn{
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: #fff;
  border: 2px solid rgba(255,255,255,0.35); border-radius: 18px;
  padding: 12px 20px; font-weight: 800; font-size: 15px;
}
.pill-btn:hover{ background: rgba(255,255,255,0.14); }
.pill-btn.yellow{ background: #f2d989; color: #3a2c0d; border-color: #f2d989; }
.pill-btn.yellow:hover{ background: #f6e2a4; }

/* ---------- Child home: ribbon strip ---------- */

.ribbon-strip{
  display: flex; align-items: center; gap: 18px; width: 100%;
  margin-top: 18px; padding: 12px 18px 12px 12px;
  background: rgba(255,255,255,0.08); border: none; border-radius: 26px;
  color: #fff; text-align: left; cursor: pointer;
}
.ribbon-strip:hover{ background: rgba(255,255,255,0.13); }
.puzzle-card{
  display: flex; align-items: center; gap: 14px; flex: none;
  background: var(--cream-card); color: var(--teal-dark);
  border-radius: 20px; padding: 10px 18px 10px 10px;
}
.puzzle-art svg{ width: 70px; height: 70px; display: block; }
.puzzle-text{ display: flex; flex-direction: column; gap: 2px; }
.puzzle-text b{ font-size: 16px; }
.puzzle-text span{ font-size: 14px; color: var(--ink-soft); font-weight: 600; }
.ribbon-row{ display: flex; gap: 22px; flex: 1; align-items: center; overflow: hidden; min-width: 0; }
.strip-ribbon svg{ width: 50px; height: 64px; display: block; }
.older{ font-weight: 800; font-size: 15px; color: #cfe3dd; white-space: nowrap; }

/* ---------- Child home: subject tiles ---------- */

.home-content{
  flex: 1; width: 100%; max-width: 1400px; margin: 0 auto; padding: 28px 40px 56px;
}
.tile-grid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 28px;
}
.subject-tile{
  --tile-bg: #e9dfcf; --tile-edge: #d8c9b0; --tile-ink: #3a3128;
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  gap: 14px; min-height: 236px;
  background: var(--tile-bg); color: var(--tile-ink);
  border: none; border-radius: var(--radius-lg); padding: 24px 26px;
  text-align: left;
  box-shadow: 0 9px 0 var(--tile-edge);
  transition: transform .12s;
}
button.subject-tile:hover{ transform: translateY(-2px); }
button.subject-tile:active{ transform: translateY(4px); box-shadow: 0 5px 0 var(--tile-edge); }
.subject-tile .tile-art{ width: 124px; height: 104px; display: block; }
.subject-tile .tile-art svg{ width: 100%; height: 100%; display: block; }
.tile-text{ display: flex; flex-direction: column; }
.subject-tile .subj-name{
  font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.2vw, 36px); line-height: 1.05;
}
.subject-tile .subj-meta{ font-size: 15px; font-weight: 700; margin-top: 4px; opacity: .9; }
.subject-tile .badge{
  position: absolute; top: 18px; right: 18px;
  width: 48px; height: 48px; border-radius: 50%;
  background: #a4502f; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 22px;
}
.subject-tile .tile-corner{ position: absolute; right: 18px; bottom: 16px; width: 62px; transform: rotate(4deg); }
.subject-tile .tile-corner svg{ width: 100%; display: block; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }
.subject-tile.inactive{ opacity: .6; }
.subject-tile.soon{ cursor: default; }
.theme-bedtime{ --tile-bg: #2b3a59; --tile-edge: #1c2742; --tile-ink: #fbf3df; }
.theme-plain{ --tile-bg: #e9dfcf; --tile-edge: #d8c9b0; --tile-ink: #3a3128; }
.home-empty{ grid-column: 1 / -1; padding: 40px 0; font-size: 18px; }

/* ---------- Small screens ---------- */

@media (max-width: 720px){
  .child-card{ padding: 24px 24px; gap: 16px; border-radius: 32px; }
  .avatar-lg{ margin-right: 28px; }
  .avatar-lg .avatar-face{ width: 96px; height: 96px; }
  .avatar-lg .avatar-companion{ width: 60px; height: 60px; right: -30px; bottom: -10px; }
  .home-header{ padding: 16px 16px; padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
  .home-hint{ display: none; }
  .ribbon-strip{ flex-wrap: wrap; }
  .ribbon-row{ order: 3; flex-basis: 100%; }
  .home-content{ padding: 20px 16px 40px; }
  .tile-grid{ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
  .subject-tile{ min-height: 190px; }
}

/* ---------- Picker: Change (avatar) button + chooser ---------- */

.change-btn{
  align-self: flex-start; flex: none;
  background: rgba(255,255,255,.18); color: var(--cream-card); border: 2px solid rgba(255,255,255,.35);
  border-radius: 16px; padding: 10px 20px; font-weight: 800; font-size: 16px;
}
.change-btn:hover{ background: rgba(255,255,255,.3); }
.change-btn:focus-visible{ outline: 4px solid var(--gold); outline-offset: 3px; }

.avatar-modal{ max-width: 560px; max-height: 92vh; overflow-y: auto; }
.avatar-modal h2{ margin: 0 0 8px; }
.avatar-modal h3{ font-size: 18px; margin: 14px 0 8px; color: var(--teal-dark); }
.chooser-preview{ display: flex; align-items: center; gap: 26px; background: var(--teal); color: #fff; border-radius: 26px; padding: 18px 24px; }
.chooser-preview .avatar-lg .avatar-face{ width: 110px; height: 110px; }
.chooser-preview .avatar-lg .avatar-companion{ width: 70px; height: 70px; right: -34px; bottom: -10px; }
.chooser-preview .avatar-lg{ margin-right: 34px; }
.chooser-caption{ font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.15; }
.choice-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px; }
.choice{
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px;
  background: #fff; border: 3px solid var(--tan-line); border-radius: 18px; font-weight: 800; font-size: 13.5px; color: var(--ink);
}
.choice.on{ border-color: var(--teal); background: var(--teal-light); }
.choice:focus-visible{ outline: 4px solid var(--gold); outline-offset: 2px; }
.base-chip, .companion-chip{ width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f7e3c8; overflow: hidden; }
.base-chip svg{ width: 84%; height: 84%; }
.companion-chip svg{ width: 80%; height: 80%; }
.companion-chip.none{ background: var(--tan); color: var(--ink-soft); font-size: 26px; }
.chooser-actions{ margin-top: 16px; }

@media (max-width: 720px){
  .child-card{ flex-wrap: wrap; }
  .change-btn{ padding: 8px 16px; font-size: 14px; }
  .chooser-preview .avatar-lg{ margin-right: 22px; }
}