/* Fredoka One font used */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');

:root{
  --purple: #6c63ff;
  --purple-strong: #574fcf;
  --blue: #1e90ff;
  --white: #ffffff;
  --mist: rgba(30,30,47,0.06);
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  font-family: 'Fredoka One', cursive;
  background: linear-gradient(180deg,#f8fbff,#ffffff);
  color: #1e1e2f;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100vh;
}

/* screens */
.screen{ width:100%; max-width:1100px; padding:18px; }
.hidden{ display:none; }

/* Menu */
.menu-header{ text-align:center; margin-bottom:12px; }
.menu-header h1{ color:var(--purple); font-size:2.8rem; margin:0; }
.menu-header p{ color:var(--blue); margin:6px 0 8px 0; }

.menu-controls{ display:flex; gap:10px; justify-content:center; margin-bottom:12px; }
.control{ background:#f4f4ff; border:2px solid var(--purple); color:var(--purple); padding:8px 12px; border-radius:10px; cursor:pointer; }

.book-shelf{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:18px; }

/* story card */
.book{
  background: linear-gradient(180deg,#fff,#f7f5ff);
  border-radius:12px;
  padding:18px;
  border:3px solid rgba(108,99,255,0.12);
  box-shadow: 0 10px 30px rgba(99,88,200,0.06);
  display:flex; flex-direction:column; gap:12px; align-items:flex-start;
  transition: transform .18s ease, box-shadow .18s ease;
  cursor:pointer;
}
.book:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(99,88,200,0.12); }
.book h3{ margin:0; color:var(--purple); font-size:1.2rem; }
.book p{ margin:0; color:#444; font-size:0.95rem; }

/* story screen controls */
#controls-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }
.secondary{ background:#f4f4ff; color:var(--purple); border:2px solid var(--purple); padding:8px 12px; border-radius:10px; cursor:pointer; }

/* typing area */
#typing-container{ width:100%; }
#story-display{
  border:3px solid var(--purple);
  border-radius:12px;
  padding:20px;
  min-height:160px;
  font-size:1.28rem;
  line-height:1.6;
  background: linear-gradient(180deg, rgba(108,99,255,0.03), rgba(30,144,255,0.01));
  white-space: pre-wrap;
  overflow:hidden;
  position:relative;
}

/* per-char */
#story-display span{ display:inline-block; opacity:.25; transition:color .12s,opacity .12s; color:#1e1e2f; min-width:2px; }
.caret{ display:inline-block; width:2px; height:1.2em; background:var(--purple); vertical-align:bottom; margin-right:-2px; animation:blink 1s steps(1) infinite; }
@keyframes blink{50%{opacity:0;}}

/* instructions/help */
#instructions, #help{ color:#666; margin-top:10px; text-align:left; }

/* keyboard */
#keyboard-wrap{ position:fixed; left:0; right:0; bottom:0; padding:12px; background:linear-gradient(180deg,rgba(108,99,255,0.06),rgba(30,144,255,0.02)); box-shadow:0 -8px 30px rgba(0,0,0,0.04); }
.keyboard{ width:92%; max-width:980px; margin:0 auto; display:flex; flex-direction:column; gap:8px; }
.krow{ display:flex; gap:8px; justify-content:center; }
.key{ background:var(--white); border:2px solid var(--mist); padding:8px 12px; border-radius:8px; min-width:36px; text-align:center; font-weight:700; transition:all .08s; user-select:none; }
.key.wide{ min-width:100px; }
.key.active{ background: linear-gradient(180deg,var(--purple),var(--purple-strong)); color:white; transform:translateY(1px) scale(.995); }
.key.highlight{ background-color:#6a5acd; color:white; transform:scale(1.08); box-shadow:0 0 18px rgba(106,90,205,0.5); }

/* mini-game */
#minigame-screen{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.minigame-area{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.minigame-instructions{ color:#666; }

/* responsive */
@media(max-width:700px){
  .book{ padding:12px; }
  #story-display{ font-size:1.05rem; padding:14px; min-height:120px; }
  .key{ padding:6px 8px; min-width:28px; }
}