.prep-button { background: #cfe8ef; border-color: #6d9fac; box-shadow: 0 4px 0 #99c1cc; }
.prep-button:hover { background: #dff3f7; }
.prep-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.prep-motion { padding: 10px 14px; min-height: 46px; border: 1px solid #99afb7; border-radius: 20px; background: #f8fcfd; color: var(--ink); font-size: 17px; }
.prep-heading { display: flex; justify-content: center; align-items: center; gap: 25px; padding: 25px 0 35px; }
.prep-heading h2 { margin: 0 0 12px; font-size: clamp(29px, 4vw, 43px); line-height: 1.3; }
.prep-heading p { margin: 0; font-size: 23px; line-height: 1.5; }
.prep-view [tabindex="-1"]:focus { outline: none; }
.prep-mascot { position: relative; flex-shrink: 0; font-size: 90px; line-height: 1.3; animation: owl-welcome 900ms ease-out; }
.prep-mascot-star { position: absolute; top: -4px; right: -10px; color: #b78b29; font-size: 33px; animation: star-hello 1.2s ease-in-out 2; }
.prep-setup { padding: 35px; border: 2px solid #c6dce2; border-radius: 30px; background: #f9fcfd; text-align: center; }
.prep-setup h3 { margin: 0 0 18px; font-size: 30px; line-height: 1.4; }
.prep-setup > p { max-width: 650px; margin: 0 auto 25px; font-size: 23px; line-height: 1.7; }
.prep-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 28px; }
.prep-mode { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 20px; border: 2px solid #a59ac1; border-radius: 23px; background: #ece5f8; color: var(--ink); box-shadow: 0 5px 0 #c4b8dc; transition: transform 180ms ease, background 180ms ease; }
.prep-mode:hover { transform: translateY(-5px); background: #f1ebfc; }
.prep-mode-full { background: #e5efda; border-color: #95ad7b; box-shadow: 0 5px 0 #b6c99d; }
.prep-mode-full:hover { background: #eef6e4; }
.prep-mode-icon { font-size: 52px; line-height: 1.2; }
.prep-mode strong { font-size: 28px; line-height: 1.3; }
.prep-mode > span:last-child { font-size: 20px; line-height: 1.6; }
.prep-setup .prep-gentle-note { margin-top: 30px; margin-bottom: 15px; font-size: 20px; }
.prep-material { max-width: 650px; margin: 25px auto 0; text-align: left; font-size: 19px; line-height: 1.7; }
.prep-material summary { cursor: pointer; }
.prep-material li { padding: 5px 0; }
.prep-resume { margin-bottom: 5px; }
.prep-progress-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 23px; font-size: 21px; }
.prep-progress-panel p { margin: 0; }
.prep-star-count { display: inline-flex; align-items: center; gap: 7px; }
.prep-progress-panel progress { display: block; width: 100%; height: 19px; appearance: none; border: 0; border-radius: 20px; overflow: hidden; background: #d5e3e8; }
.prep-progress-panel progress::-webkit-progress-bar { background: #d5e3e8; border-radius: 20px; }
.prep-progress-panel progress::-webkit-progress-value { background: #d6b14c; border-radius: 20px; transition: width 500ms ease; }
.prep-progress-panel progress::-moz-progress-bar { background: #d6b14c; border-radius: 20px; }
.prep-card { padding: 30px; border: 2px solid #d4dfd5; border-radius: 30px; background: #fffdf6; text-align: center; }
.prep-kind { display: inline-block; margin: 0 0 14px; padding: 7px 16px; border-radius: 20px; background: #e6eef6; color: #3b586e; font-size: 18px; }
.prep-question-emoji { display: block; margin-bottom: 12px; font-size: 49px; line-height: 1.3; }
.prep-card h3 { margin: 0; font-size: 31px; line-height: 1.4; }
.prep-clue { max-width: 650px; margin: 15px auto; font-size: 22px; line-height: 1.6; }
.prep-word { margin: 23px 0 15px; font-size: clamp(34px, 5.5vw, 54px); font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.prep-sentence { max-width: 700px; margin: 0 auto 25px; font-size: 25px; line-height: 1.7; text-wrap: pretty; }
.prep-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 25px 0; }
.prep-options .prep-answer { min-width: 85px; min-height: 84px; padding: 12px 18px; font-size: 37px; }
.prep-word-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prep-word-options .prep-answer { min-width: 0; font-size: 27px; overflow-wrap: anywhere; }
.prep-alphabet-help { margin-top: 20px; background: #f1f6f7; text-align: left; }
.prep-alphabet-help .alphabet-strip { font-size: 23px; word-spacing: 5px; }
.prep-hint { padding: 17px 20px; border-radius: 16px; background: #f1ecfa; }
.prep-finish-garden { margin-bottom: 25px; font-size: clamp(30px, 5vw, 50px); }
.prep-finish-actions { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 25px; }
.prep-finish-actions .play-button { margin: 0; }
.prep-effects { position: fixed; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; }
.prep-spark { position: absolute; top: 45%; left: 50%; font-size: 28px; opacity: 0; animation: spark-burst 1s ease-out both; }
.answer-button.correct-answer { animation: answer-bloom 400ms ease-out; }
.earned-flower { display: inline-block; animation: answer-bloom 450ms ease-out; }
.prep-view[data-motion="off"] *, .prep-view[data-motion="off"] *::before, .prep-view[data-motion="off"] *::after { animation: none !important; transition: none !important; }

@keyframes owl-welcome {
  0% { opacity: 0; transform: translateY(25px) rotate(-15deg); }
  60% { opacity: 1; transform: translateY(-8px) rotate(8deg); }
  100% { opacity: 1; transform: translateY(0) rotate(0); }
}
@keyframes star-hello {
  0%, 100% { transform: scale(1) rotate(0); }
  50% { transform: scale(1.25) rotate(20deg); }
}
@keyframes answer-bloom {
  0% { transform: scale(.9); }
  60% { transform: scale(1.07); }
  100% { transform: scale(1); }
}
@keyframes spark-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  15% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) rotate(65deg) scale(1); }
}

@media (max-width: 700px) {
  .prep-toolbar { gap: 10px; }
  .prep-toolbar .back-button { font-size: 18px; }
  .prep-motion { font-size: 16px; }
  .prep-heading { flex-direction: column; gap: 8px; padding: 25px 0; text-align: center; }
  .prep-mascot { font-size: 72px; }
  .prep-heading h2 { font-size: 30px; }
  .prep-heading p { font-size: 21px; }
  .prep-setup { padding: 26px 16px; }
  .prep-setup h3 { font-size: 26px; }
  .prep-setup > p { font-size: 21px; }
  .prep-modes { grid-template-columns: 1fr; gap: 23px; }
  .prep-mode { padding: 22px 14px; }
  .prep-mode strong { font-size: 27px; }
  .prep-progress-panel { font-size: 19px; }
  .prep-card { padding: 25px 14px; border-radius: 24px; }
  .prep-card h3 { font-size: 27px; }
  .prep-clue { font-size: 21px; }
  .prep-sentence { font-size: 23px; }
  .prep-options { gap: 10px; }
  .prep-options .prep-answer { min-width: 65px; min-height: 76px; padding: 10px 12px; font-size: 32px; }
  .prep-word-options { grid-template-columns: 1fr; }
  .prep-word-options .prep-answer { min-height: 66px; font-size: 25px; }
  .prep-finish-actions .play-button { width: 100%; font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}