/* screens.css – layout for alle skjermer */

/* ── Bakgrunnsbobler ── */
.bg-blobs {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.bg-blobs span {
  position: absolute; border-radius: 50%; opacity: .07;
  animation: blobFloat calc(8s * var(--anim-speed)) ease-in-out infinite;
}
.bg-blobs span:nth-child(1){width:300px;height:300px;background:var(--math);top:-80px;left:-80px;animation-delay:0s}
.bg-blobs span:nth-child(2){width:200px;height:200px;background:var(--lang);top:40%;right:-60px;animation-delay:-3s}
.bg-blobs span:nth-child(3){width:250px;height:250px;background:var(--nature);bottom:-60px;left:30%;animation-delay:-5s}
.bg-blobs span:nth-child(4){width:180px;height:180px;background:var(--draw);top:20%;left:20%;animation-delay:-2s}
@keyframes blobFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(1.05)}}

/* ── Skjermhåndtering ── */
.screen { display: none; min-height: 100vh; position: relative; z-index: 1; flex-direction: column; }
.screen.active { display: flex; }

/* ── SPLASH ── */
#splash {
  align-items: center; justify-content: center; text-align: center; padding: 40px 24px;
}
.mascot {
  font-size: 100px; line-height: 1; display: block; margin-bottom: 16px;
  animation: bounce calc(1.2s * var(--anim-speed)) ease-in-out infinite;
}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.app-title {
  font-size: clamp(36px, 8vw, 56px); font-weight: 900;
  background: linear-gradient(135deg, var(--math), var(--draw));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; margin-bottom: 8px;
}
.app-sub { font-size: 18px; color: var(--text-med); margin-bottom: 40px; }

.profile-grid {
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: center; margin-bottom: 32px; max-width: 500px;
}
.profile-card {
  background: var(--surface); border-radius: var(--radius);
  padding: 20px 24px; min-width: 120px; cursor: pointer;
  box-shadow: var(--shadow-sm); border: 3px solid transparent; text-align: center;
  transition: transform .2s, box-shadow .2s;
}
.profile-card:hover, .profile-card:focus {
  transform: translateY(-4px) scale(1.04); box-shadow: var(--shadow);
  border-color: var(--math);
}
.profile-card .avatar { font-size: 48px; display: block; margin-bottom: 8px; }
.profile-card .pname  { font-weight: 800; font-size: 16px; }
.profile-card .pstars { font-size: 13px; color: var(--text-med); margin-top: 4px; }

/* ── HOME ── */
#home { padding: 0; }
.home-header {
  padding: 24px 24px 12px;
  display: flex; align-items: center; justify-content: space-between;
}
.child-greeting { display: flex; align-items: center; gap: 12px; }
.child-avatar-sm { font-size: 40px; }
.greeting-text h2 { font-weight: 900; font-size: 22px; }
.greeting-text p  { color: var(--text-med); font-size: 14px; }
.star-badge {
  background: var(--star); color: #7A5600; font-weight: 900;
  border-radius: 100px; padding: 8px 16px; font-size: 16px;
  box-shadow: 0 4px 12px rgba(255,215,0,.4);
}

.module-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; padding: 16px 24px 100px; flex: 1;
}
.module-card {
  border-radius: var(--radius); padding: 28px 20px;
  cursor: pointer; text-align: center; overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s;
  min-height: 160px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; border: none;
}
.module-card:hover  { transform: translateY(-4px) scale(1.02); box-shadow: var(--shadow); }
.module-card:active { transform: scale(.97); }
.mod-emoji {
  font-size: 56px; line-height: 1; display: block;
  animation: wiggle calc(3s * var(--anim-speed)) ease-in-out infinite;
}
@keyframes wiggle{0%,90%,100%{transform:rotate(0)}92%{transform:rotate(-8deg)}96%{transform:rotate(8deg)}}
.module-card h3 { font-weight: 900; font-size: 20px; }
.module-card p  { font-size: 13px; opacity: .75; }
.progress-dots  { display: flex; gap: 6px; margin-top: 4px; }
.dot            { width: 10px; height: 10px; border-radius: 50%; background: rgba(0,0,0,.15); }
.dot.filled     { background: rgba(0,0,0,.45); }

.mod-math   { background: var(--math-light);   color: #2a3f80; }
.mod-lang   { background: var(--lang-light);   color: #7a3a10; }
.mod-nature { background: var(--nature-light); color: #1a5c3a; }
.mod-draw   { background: var(--draw-light);   color: #7a1f45; }

.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--surface); padding: 12px 24px;
  display: flex; justify-content: flex-end;
  box-shadow: 0 -4px 20px rgba(0,0,0,.08); z-index: 100;
}
.parent-btn {
  background: #f0f0f8; color: var(--text-med); font-family: var(--font);
  font-weight: 700; font-size: 14px; padding: 10px 20px;
  border-radius: 100px; border: none; cursor: pointer; transition: background .2s;
}
.parent-btn:hover { background: #e0e0f0; }

/* ── MODUL ── */
#module-screen { padding: 0; }
.module-header {
  padding: 20px 24px 16px; display: flex; align-items: center; gap: 16px;
}
.back-btn {
  width: 56px; height: 56px; border-radius: 50%; border: none;
  cursor: pointer; font-size: 24px; display: flex; align-items: center;
  justify-content: center; box-shadow: var(--shadow-sm);
  background: var(--surface); transition: transform .2s; flex-shrink: 0;
  color: var(--text);
}
.back-btn:hover { transform: scale(1.1); }
.module-header h2 { font-weight: 900; font-size: 26px; }
.module-content   { flex: 1; padding: 0 24px 120px; max-width: 560px; margin: 0 auto; width: 100%; }

/* ── PIN ── */
.pin-screen {
  align-items: center; justify-content: center; text-align: center; padding: 40px 24px;
}
.pin-title { font-size: 28px; font-weight: 900; margin-bottom: 8px; }
.pin-sub   { color: var(--text-med); margin-bottom: 32px; }
.pin-display { display: flex; gap: 12px; justify-content: center; margin-bottom: 32px; }
.pin-dot {
  width: 20px; height: 20px; border-radius: 50%;
  border: 3px solid var(--math); background: transparent; transition: background .15s;
}
.pin-dot.filled { background: var(--math); }
.pin-pad {
  display: grid; grid-template-columns: repeat(3, 80px);
  gap: 12px; justify-content: center;
}
.pin-key {
  width: 80px; height: 80px; border-radius: 50%; border: none;
  background: var(--surface); font-family: var(--font); font-weight: 800;
  font-size: 24px; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: all .1s; color: var(--text);
}
.pin-key:hover  { background: var(--math-light); transform: scale(1.05); }
.pin-key:active { transform: scale(.95); }

/* ── FORELDREPANEL ── */
.parent-screen { overflow-y: auto; }
.parent-screen-inner { padding: 24px; max-width: 640px; margin: 0 auto; }
.parent-header { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.parent-header h2 { font-weight: 900; font-size: 26px; }

.settings-section {
  background: var(--surface); border-radius: var(--radius);
  padding: 24px; margin-bottom: 20px; box-shadow: var(--shadow-sm);
}
.settings-section h3 { font-weight: 900; font-size: 18px; margin-bottom: 16px; }
.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid #f0f0f8;
}
.setting-row:last-child { border-bottom: none; }
.setting-label { font-weight: 700; font-size: 16px; }
.setting-desc  { font-size: 13px; color: var(--text-med); margin-top: 2px; }

/* Toggle */
.toggle { position: relative; width: 56px; height: 30px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; background: #ccc; border-radius: 100px;
  cursor: pointer; transition: background .2s;
}
.toggle-slider:before {
  content: ''; position: absolute; width: 22px; height: 22px;
  left: 4px; top: 4px; background: white; border-radius: 50%;
  transition: transform .2s; box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.toggle input:checked + .toggle-slider             { background: var(--nature); }
.toggle input:checked + .toggle-slider:before      { transform: translateX(26px); }

/* Diff-knapper */
.diff-buttons { display: flex; gap: 8px; }
.diff-btn {
  padding: 8px 16px; border-radius: 100px; border: 2px solid #ddd;
  background: var(--surface); font-family: var(--font); font-weight: 700;
  font-size: 14px; cursor: pointer; transition: all .15s; color: var(--text);
}
.diff-btn.active { border-color: var(--math); background: var(--math-light); color: var(--math); }

/* Fremgang */
.progress-section { display: flex; flex-direction: column; gap: 12px; }
.progress-item    { display: flex; align-items: center; gap: 12px; }
.pi-info          { flex: 1; }
.pi-label         { font-weight: 700; font-size: 15px; }
.progress-bar     { height: 10px; border-radius: 100px; background: #eee; margin-top: 4px; overflow: hidden; }
.progress-fill    { height: 100%; border-radius: 100px; transition: width .5s ease; }
.pi-stars         { font-size: 14px; font-weight: 700; color: var(--text-med); white-space: nowrap; }

/* Barneliste */
.child-list        { display: flex; flex-direction: column; gap: 12px; }
.child-item {
  display: flex; align-items: center; gap: 16px;
  padding: 16px; border-radius: var(--radius-sm); background: #f8f8ff;
  cursor: pointer; transition: background .15s; border: 2px solid transparent;
}
.child-item:hover      { background: var(--math-light); }
.child-item.active-child { border-color: var(--math); }
.ci-avatar { font-size: 40px; }
.ci-info   { flex: 1; }
.ci-name   { font-weight: 800; font-size: 18px; }
.ci-stats  { font-size: 13px; color: var(--text-med); }
.ci-active {
  font-size: 12px; background: var(--nature); color: white;
  padding: 4px 10px; border-radius: 100px; font-weight: 700;
}
.ci-delete {
  background: none; border: none; font-size: 18px; cursor: pointer;
  padding: 8px; border-radius: 8px; transition: background .15s;
}
.ci-delete:hover { background: #ffe0e0; }

/* Legg til barn-skjema */
.add-child-form { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.name-input {
  font-family: var(--font); font-size: 18px; font-weight: 700;
  padding: 16px 20px; border: 3px solid #eee; border-radius: var(--radius-sm);
  outline: none; transition: border-color .2s; background: var(--bg); color: var(--text);
}
.name-input:focus { border-color: var(--math); }
.avatar-picker { display: flex; flex-wrap: wrap; gap: 10px; }
.av-btn {
  width: 52px; height: 52px; border-radius: 50%; border: 3px solid transparent;
  background: #f0f0f8; font-size: 26px; cursor: pointer; transition: all .15s;
}
.av-btn:hover, .av-btn.selected { border-color: var(--math); transform: scale(1.15); }

/* Tegningsgalleri */
.drawings-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
}
.drawing-thumb {
  width: 100%; aspect-ratio: 1; border-radius: 12px;
  background: #f0f0f8; overflow: hidden;
}

/* ── FEEDBACK ── */
.feedback-overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  z-index: 500; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: rgba(0,0,0,.3);
}
.feedback-overlay.show { opacity: 1; pointer-events: all; }
.feedback-box {
  background: var(--surface); border-radius: var(--radius);
  padding: 40px 48px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  transform: scale(.8); transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.feedback-overlay.show .feedback-box { transform: scale(1); }
.feedback-emoji { font-size: 80px; display: block; margin-bottom: 12px; }
.feedback-text  { font-size: 28px; font-weight: 900; margin-bottom: 20px; }
.stars-row      { display: flex; gap: 8px; justify-content: center; margin-bottom: 24px; }
.star-anim {
  font-size: 36px; opacity: 0;
  animation: starPop calc(.4s * var(--anim-speed)) ease forwards;
}
@keyframes starPop{0%{transform:scale(0) rotate(-20deg);opacity:0}70%{transform:scale(1.3) rotate(5deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}

/* ── Responsiv ── */
@media(min-width:600px){
  .module-grid { grid-template-columns: repeat(4,1fr); }
}

/* ── Splash: steg-animasjon ── */
.splash-step        { display: none; flex-direction: column; align-items: center;
                      text-align: center; padding: 40px 24px; animation: fadeIn .3s ease; }
.splash-step.active { display: flex; }
@keyframes fadeIn   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Stort navn-inputfelt */
.name-entry-box {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; width: 100%; max-width: 400px;
}
.big-name-input {
  width: 100%; font-family: var(--font); font-size: clamp(22px, 5vw, 32px);
  font-weight: 800; text-align: center; padding: 20px 24px;
  border: 4px solid var(--math-light); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  outline: none; transition: border-color .2s, box-shadow .2s;
  box-shadow: var(--shadow-sm);
}
.big-name-input:focus {
  border-color: var(--math);
  box-shadow: 0 0 0 4px rgba(91,138,245,.15);
}
.big-name-input::placeholder { color: var(--text-med); font-weight: 400; }

/* Avatar-grid på splash */
.avatar-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; max-width: 360px; width: 100%; margin: 0 auto;
}
.avatar-pick-btn {
  width: 72px; height: 72px; font-size: 36px; border-radius: 50%;
  border: 4px solid transparent; background: var(--surface);
  cursor: pointer; transition: all .15s; box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center;
}
.avatar-pick-btn:hover  { transform: scale(1.15); border-color: var(--math-light); }
.avatar-pick-btn.selected {
  border-color: var(--math);
  background: var(--math-light);
  transform: scale(1.15);
  box-shadow: 0 0 0 3px rgba(91,138,245,.25);
}

@media(min-width:600px){
  .avatar-grid { grid-template-columns: repeat(8, 1fr); max-width: 560px; }
  .module-grid { grid-template-columns: repeat(4,1fr); }
  .module-content { max-width:560px; margin:0 auto; }
  #splash { max-width:520px; margin:0 auto; }
}