:root{
  --bg:#87CEEB;
  --text:#2d4a6f;
  --muted:#5a7a9a;
  --card:#fff;
  --border:#6bb8e0;
  --primary:#ff6b35;
  --primaryText:#fff;
  --accent:#ffcc00;
}

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap');

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Nunito', system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-tap-highlight-color: transparent;
}

.app{
  min-height:100%;
  display:flex;
  flex-direction:column;
  max-width:420px;
  margin:0 auto;
}

.topbar{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 14px;
  background:var(--bg);
  border-bottom:1px solid var(--border);
}

.brand{
  font-weight:700;
  font-size:18px;
  letter-spacing:.2px;
  text-align:center;
  color:var(--text);
}

.topbar .link{
  position:absolute;
  left:14px;
  border:none;
  background:transparent;
  padding:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text);
}

.icon-btn{
  padding:8px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.link{
  appearance:none;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  border-radius:999px;
  padding:10px 12px;
  font-size:14px;
}

.panel{
  padding:16px;
  width:100%;
}

.parent-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.h1{
  font-size:22px;
  font-weight:800;
  margin:6px 0 10px;
}

.p{margin:0 0 14px;color:var(--muted);line-height:1.35}
.label{display:block;margin:10px 0 8px;font-weight:700}

.textarea{
  width:100%;
  border:2px solid var(--border);
  border-radius:14px;
  padding:14px;
  font-size:18px;
  line-height:1.35;
  background:var(--card);
  color:var(--text);
}

.input{
  width:100%;
  border:2px solid var(--border);
  border-radius:14px;
  padding:14px;
  font-size:18px;
  background:var(--card);
  color:var(--text);
}

.toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:16px 0;
}

.toggle-label{
  font-weight:700;
  font-size:16px;
}

.toggle{
  position:relative;
  width:52px;
  height:28px;
}

.toggle input{
  opacity:0;
  width:0;
  height:0;
}

.toggle-slider{
  position:absolute;
  cursor:pointer;
  top:0;left:0;right:0;bottom:0;
  background:#ccc;
  border-radius:28px;
  transition:.3s;
}

.toggle-slider:before{
  position:absolute;
  content:"";
  height:22px;
  width:22px;
  left:3px;
  bottom:3px;
  background:#fff;
  border-radius:50%;
  transition:.3s;
}

.toggle input:checked + .toggle-slider{
  background:var(--primary);
}

.toggle input:checked + .toggle-slider:before{
  transform:translateX(24px);
}

.file-input{
  width:100%;
  padding:12px;
  font-size:16px;
  margin-bottom:12px;
}

.file-input-hidden{
  display:none;
}

.word-input-row{
  display:flex;
  gap:10px;
  align-items:center;
}

.word-input-row .input{
  flex:1;
}

.full-width{
  width:100%;
  margin-top:12px;
}

.file-label{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  background:#fff;
  border:2px solid #ddd;
  border-radius:16px;
  cursor:pointer;
  transition:filter 0.15s;
}

.file-label:active{
  filter:brightness(.97);
}


.file-label:has(input:valid:not(:placeholder-shown)),
.file-label.has-file{
  border-color:var(--success);
  background:#fff;
}

.file-label.has-file .file-icon{
  filter:brightness(10);
}

.file-icon{
  font-size:22px;
}

.file-icon-svg{
  width:24px;
  height:24px;
  color:var(--text);
}

.file-label.has-file .file-icon-svg{
  color:var(--success);
}

.add-word-row .btn{
  flex:1;
  min-height:52px;
}

.addBtn{
  width:100%;
  margin-top:12px;
}

.word-list{
  margin-top:16px;
}

.word-item-wrapper{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  margin-bottom:8px;
  background:#e74c3c;
}

.word-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--card);
  border:2px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  position:relative;
  z-index:1;
  box-shadow:0 8px 20px rgba(0,0,0,0.15), 0 4px 8px rgba(0,0,0,0.1);
}

.word-item-left{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
}

.word-with-dropdown{
  position:relative;
  display:inline-flex;
  align-items:center;
}

.word-item-wrapper:has(.word-group-select:not(.hidden)){
  z-index:1000;
  position:relative;
}

.word-item-text{
  font-weight:700;
  font-size:18px;
}

.word-group-select{
  position:absolute;
  top:0;
  left:0;
  z-index:100;
  background:#fff;
  border:2px solid var(--primary);
  border-radius:8px;
  padding:0;
  font-size:14px;
  font-weight:600;
  color:var(--text);
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  min-width:140px;
  overflow:hidden;
}

.word-group-select option{
  padding:10px 12px;
}

.word-group-select option:hover,
.word-group-select option:checked{
  background:var(--border);
}

.word-group-select.hidden{
  display:none;
}

.word-item-play{
  background:var(--primary);
  color:#fff;
  border:none;
  border-radius:50%;
  width:32px;
  height:32px;
  font-size:14px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.word-item-delete{
  display:none;
  background:none;
  border:none;
  color:#e74c3c;
  cursor:pointer;
  padding:4px;
  margin-left:auto;
  margin-right:8px;
}

.word-item-delete svg{
  width:20px;
  height:20px;
}

@media (hover: hover) {
  .word-item:hover .word-item-delete{
    display:block;
  }
}

.word-item.disabled{
  opacity:0.5;
}

.group-row{
  display:flex;
  gap:8px;
  align-items:center;
}

.group-row .select{
  flex:1;
}

.select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:40px;
}

.group-list{
  margin-top:16px;
}

.group-section{
  margin-bottom:16px;
}

.group-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 0;
  border-bottom:2px solid var(--border);
  margin-bottom:8px;
}

.group-title{
  font-weight:800;
  font-size:16px;
  color:var(--text);
}

.toggle.small{
  transform:scale(0.8);
  margin:0;
}

.toggle.small .toggle-slider{
  width:40px;
  height:22px;
}

.toggle.small .toggle-slider::before{
  width:16px;
  height:16px;
}

.toggle.small input:checked + .toggle-slider::before{
  transform:translateX(18px);
}

.row{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:14px;
}

.btn{
  appearance:none;
  border:2px solid var(--border);
  background:var(--card);
  color:var(--text);
  border-radius:16px;
  padding:14px 14px;
  font-size:18px;
  font-weight:800;
  min-height:56px;
  flex:1;
}

.btn.primary{
  border-color:var(--primary);
  background:var(--primary);
  color:var(--primaryText);
}

.btn:active, .link:active{filter:brightness(.97)}

.btn.small{flex:none;padding:14px 28px}

.bluey-btn{
  width:140px;
  height:auto;
  cursor:pointer;
  transition:transform 0.15s;
}

.bluey-btn:active{
  transform:scale(0.9);
}

.bluey-btn-big{
  width:180px;
  height:auto;
  cursor:pointer;
  animation:teeter 4s ease-in-out infinite;
}

.bluey-btn-big.animate{
  animation:teeter 4s ease-in-out infinite, popIn 0.5s ease-out;
}

.bluey-btn-big:active{
  transform:scale(0.9);
}

@keyframes teeter{
  0%, 100%{ transform:rotate(-3deg); }
  50%{ transform:rotate(3deg); }
}

@keyframes popIn{
  0%{ opacity:0; transform:scale(0.5); }
  70%{ transform:scale(1.1); }
  100%{ opacity:1; transform:scale(1); }
}

@keyframes slideUp{
  0%{ opacity:0; transform:translateY(30px); }
  100%{ opacity:1; transform:translateY(0); }
}

@keyframes bounceIn{
  0%{ opacity:0; transform:scale(0); }
  50%{ transform:scale(1.15); }
  70%{ transform:scale(0.9); }
  100%{ opacity:1; transform:scale(1); }
}

.back-btn{
  position:absolute;
  top:16px;
  left:16px;
  width:48px;
  height:48px;
  border:none;
  background:#fff;
  border-radius:50%;
  color:var(--primary);
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
  padding:0;
}

.back-btn svg{
  width:24px;
  height:24px;
}

.back-btn:active{
  transform:scale(0.95);
}

.spellaroo-btn{
  width:85%;
  max-width:320px;
  cursor:pointer;
  transition:transform 0.15s ease;
}

.spellaroo-btn:active{
  transform:scale(0.95);
}

.landing-container{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:80vh;
  gap:40px;
  padding:40px 20px;
}

.landing-image{
  width:280px;
  height:auto;
  animation:float 3s ease-in-out infinite;
}

.landing-btn{
  font-size:28px;
  padding:20px 60px;
  border-radius:50px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:2px;
}

.start-container{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:70vh;
  gap:30px;
}

.start-bluey{
  width:220px;
  height:auto;
  animation:float 2s ease-in-out infinite;
}

@keyframes float{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-12px); }
}

.success-container{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:70vh;
  gap:24px;
}

.success-bluey{
  width:200px;
  height:auto;
  animation:float 2s ease-in-out infinite;
}

.success-text{
  font-size:36px;
  font-weight:900;
  color:var(--primary);
  text-align:center;
}

.start-btn{
  width:auto;
  padding:18px 50px;
  font-size:24px;
  flex:none;
}

.rowCenter{
  display:flex;
  justify-content:center;
  margin-top:14px;
}

.status{
  min-height:22px;
  margin-top:12px;
  color:var(--muted);
  font-size:14px;
}

.hidden{display:none}

.childHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.progress{
  display:flex;
  justify-content:center;
  gap:8px;
  margin:12px 0 24px;
}

.progress.animate{
  animation:slideUp 0.4s ease-out 0.2s both;
}

.tile{
  flex:1;
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--border);
  border-radius:12px;
  background:#fff;
  font-size:32px;
  font-weight:900;
  color:var(--text);
  perspective:400px;
  transform-style:preserve-3d;
}

.tile.empty{
  background:#e0e0e0;
}

.tile.flip{
  animation:tileFlip 0.5s ease-out forwards;
}

@keyframes tileFlip{
  0%{
    transform:rotateY(0deg) scale(1);
    background:#e0e0e0;
  }
  50%{
    transform:rotateY(90deg) scale(1.1);
    background:#ffd700;
  }
  100%{
    transform:rotateY(0deg) scale(1);
    background:#fff;
  }
}

.paw-icon{
  width:36px;
  height:36px;
  opacity:0.4;
}

.grid{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}

.grid.animate{
}

.letterBtn.animate{
  animation:bounceIn 0.4s ease-out both;
}

.letterBtn{
  appearance:none;
  border:3px solid #d4a017;
  background:linear-gradient(145deg, #ffd700 0%, #f4c430 50%, #daa520 100%);
  border-radius:16px;
  aspect-ratio:1;
  font-size:34px;
  font-weight:900;
  color:#5c4813;
  text-shadow:0 1px 0 rgba(255,255,255,0.4);
  box-shadow:0 4px 8px rgba(218,165,32,0.3), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.letterBtn:active{
  filter:brightness(.95);
  transform:scale(0.98);
  box-shadow:0 2px 4px rgba(218,165,32,0.3), inset 0 1px 0 rgba(255,255,255,0.3);
}

.letterBtn.correct{
  background:#22c55e;
  border-color:#16a34a;
  color:#fff;
}

.letterBtn:disabled{
  opacity:0.4;
  pointer-events:none;
}

.letterBtn.incorrect{
  background:#ef4444;
  border-color:#dc2626;
  color:#fff;
}

/* Confetti */
.confetti-container{
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  pointer-events:none;
  overflow:hidden;
  z-index:9999;
}