/* Brick Academy: the daily quest. Bright toy-brick look, big tap targets for tablets. */
.quest {
  --sky: #29b6e6; --navy: #1d3f9e; --brick: #f7c52b; --orange: #f5821f; --grass: #2fa636; --ink: #13213f; --soft: #eaf6fc;
  min-height: 100vh; min-height: 100dvh; box-sizing: border-box;
  padding: 16px max(16px, env(safe-area-inset-right)) 40px max(16px, env(safe-area-inset-left));
  background: var(--sky);
  background-image: radial-gradient(circle at 10px 10px, rgba(255, 255, 255, 0.18) 5px, transparent 5.5px);
  background-size: 20px 20px;
  color: var(--ink); font-family: "Nunito", system-ui, sans-serif; font-size: 18px; line-height: 1.45;
}
.quest * { box-sizing: border-box; }
.quest > * { max-width: 860px; margin-left: auto; margin-right: auto; }
.quest h1, .quest h2 { font-family: "Lilita One", system-ui, sans-serif; font-weight: 400; margin: 0; line-height: 1.1; }
.quest__brand { text-align: center; color: #fff; position: relative; margin-bottom: 12px; }
.quest__brand h1 { font-size: clamp(2.2rem, 7vw, 3.4rem); text-shadow: 0 4px 0 rgba(0, 0, 0, 0.18); }
.quest__brand p { margin: 2px 0 0; font-weight: 800; }
.quest__home { position: absolute; left: 0; top: 4px; font-size: 1.8rem; text-decoration: none; }
.quest__alert { background: #fff4e6; border-radius: 12px; padding: 8px 14px; font-weight: 800; }
.quest__screen { display: grid; gap: 12px; }

.quest__top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: #fff; }
.quest__name { font-family: "Lilita One", sans-serif; font-size: 1.5rem; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.2); }
.quest__day { font-weight: 800; }
.quest__spacer { flex: 1; }
.quest__pill { background: #fff; color: var(--ink); border-radius: 999px; padding: 4px 12px; font-weight: 900; font-size: 0.95rem; white-space: nowrap; }
.quest__pill--clock { font-variant-numeric: tabular-nums; }
.quest__paused { margin: 0; background: #fff9db; border-radius: 10px; padding: 6px 12px; font-weight: 800; text-align: center; }

.quest__card { background: #fff; border-radius: 18px; padding: 18px; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.15); display: grid; gap: 14px; }
.quest__head { display: flex; gap: 12px; align-items: flex-end; justify-content: space-between; }
.quest__head h2 { font-size: 1.6rem; }
.quest__cheer { margin: 0; background: #ebfbee; border-radius: 12px; padding: 8px 12px; font-weight: 800; }
.quest__tower { display: flex; flex-direction: column-reverse; gap: 2px; align-items: center; }
.quest__tower i { width: 30px; height: 7px; border-radius: 2px; display: block; }

.quest__map { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 12px; }
.quest__stop {
  font: inherit; border: 0; border-radius: 16px; padding: 14px; text-align: left; cursor: pointer; display: grid; gap: 2px;
  background: var(--soft); color: var(--ink); box-shadow: 0 5px 0 #c3d6e6; min-height: 112px; position: relative;
}
.quest__stop:hover:not(:disabled) { transform: translateY(-2px); }
.quest__stop b { font-family: "Lilita One", sans-serif; font-weight: 400; font-size: 1.25rem; }
.quest__stop small { font-weight: 800; color: #4c5a78; }
.quest__stop.is-done { background: #ebfbee; box-shadow: 0 5px 0 #b2f2bb; cursor: default; }
.quest__stop--boss { background: #ffe066; box-shadow: 0 5px 0 #f2c94c; }
.quest__stop--bonus { background: #e5dbff; box-shadow: 0 5px 0 #b197fc; }
.quest__stop.is-locked { opacity: 0.65; cursor: default; }
.quest__icon { font-size: 1.8rem; line-height: 1; }
.quest__icon--big { font-size: 3.5rem; margin: 0; text-align: center; }

.quest__qhead { display: flex; align-items: center; gap: 10px; }
.quest__qhead b { font-family: "Lilita One", sans-serif; font-weight: 400; font-size: 1.25rem; }
.quest__back { font: 800 0.95rem "Nunito", sans-serif; border: 0; background: var(--soft); border-radius: 10px; padding: 8px 12px; cursor: pointer; color: var(--ink); }
.quest__label { margin: 0; font-weight: 900; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: #b35c00; }
.quest__prompt { margin: 0; font-size: 1.35rem; font-weight: 800; }
.quest__picture { margin: 0; font-size: 3rem; text-align: center; }
.quest__big { margin: 0; font-size: 1.25rem; font-weight: 800; }
.quest__hint { margin: 0; font-weight: 700; color: #4c5a78; }
.quest__hear { justify-self: start; font: 800 1rem "Nunito", sans-serif; border: 0; border-radius: 999px; padding: 10px 18px; background: var(--navy); color: #fff; cursor: pointer; }

.quest__passage { background: #fffdf3; border: 2px solid #f2e3a6; border-radius: 12px; padding: 10px 14px; max-height: 45vh; overflow-y: auto; }
.quest__passage summary { font-family: "Lilita One", sans-serif; font-size: 1.15rem; cursor: pointer; }
.quest__passage p { margin: 8px 0 0; font-size: 1.05rem; line-height: 1.6; }

.quest__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.quest__opts--list { grid-template-columns: 1fr; }
.quest__opt {
  font: 800 1.1rem "Nunito", sans-serif; border: 3px solid #dbe4ee; border-radius: 14px; background: #fff; color: var(--ink);
  padding: 14px 12px; cursor: pointer; box-shadow: 0 4px 0 #dbe4ee; line-height: 1.3; min-height: 56px;
}
.quest__opt--small { font-size: 1rem; text-align: left; }
.quest__opt:hover:not(:disabled) { border-color: var(--sky); }
.quest__opt:disabled { cursor: default; }
.quest__opt.is-right { border-color: var(--grass); background: #ebfbee; box-shadow: 0 4px 0 var(--grass); }
.quest__opt.is-wrong { border-color: #ffa94d; background: #fff4e6; box-shadow: 0 4px 0 #ffa94d; }
.quest__picked { margin: 0; padding-left: 1.4em; font-weight: 800; }

.quest__type { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.quest__type input { font: 400 2rem "Lilita One", sans-serif; width: 8ch; padding: 6px 12px; border-radius: 12px; border: 3px solid #dbe4ee; color: var(--ink); background: #fff; }
.quest__type input.quest__word { width: min(100%, 14ch); font-family: "Nunito", sans-serif; font-weight: 800; }
.quest__type input:focus { outline: 3px solid var(--orange); }

.quest__go {
  font: 400 1.2rem "Lilita One", sans-serif; border: 0; border-radius: 14px; background: var(--orange); color: #fff;
  padding: 12px 22px; cursor: pointer; box-shadow: 0 5px 0 #b85c0f; justify-self: start;
}
.quest__go:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #b85c0f; }
.quest__go:disabled { opacity: 0.6; cursor: default; }
.quest__go--small { padding: 10px 18px; }
.quest__go--alt { background: var(--navy); box-shadow: 0 5px 0 #10255e; }
.quest__go--soft { background: var(--soft); color: var(--ink); box-shadow: 0 5px 0 #c3d6e6; }
.quest__buttons { display: flex; gap: 8px; flex-wrap: wrap; }

.quest__feedback { border-radius: 12px; padding: 12px 14px; font-weight: 800; display: grid; gap: 6px; font-size: 1.1rem; }
.quest__feedback small { font-weight: 700; font-size: 0.95rem; }
.quest__feedback.is-good { background: #ebfbee; color: #1b5e20; }
.quest__feedback.is-notyet { background: #fff4e6; color: #7a3500; }
.quest__explain { font-weight: 700; color: var(--ink); }

.quest__flagrow { display: flex; justify-content: flex-end; }
.quest__flag { font: 800 0.85rem "Nunito", sans-serif; border: 2px dashed #c3d6e6; background: transparent; color: #4c5a78; border-radius: 999px; padding: 6px 12px; cursor: pointer; justify-self: start; }
.quest__flag:hover { border-color: #e03131; color: #e03131; }
.quest__flagbox { background: #fff0f6; border: 3px solid #fcc2d7; border-radius: 12px; padding: 12px; display: grid; gap: 10px; }

.quest__learn { background: #fff9db; border: 3px dashed #f2c94c; border-radius: 14px; padding: 16px; display: grid; gap: 10px; }
.quest__learn h2 { font-size: 1.7rem; }
.quest__learn p { margin: 0; }
.quest__learn ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; font-weight: 700; }
.quest__done { display: grid; gap: 10px; justify-items: center; text-align: center; }
.quest__done p { margin: 0; }
.quest__done h2 { font-size: 1.9rem; }
.quest__note { background: #fff9db; border-radius: 12px; padding: 12px 16px; font-style: italic; }

.quest__fig { display: flex; justify-content: center; }
.quest__fig svg { max-width: 100%; height: auto; }
.quest__tray { min-height: 120px; background: var(--soft); border-radius: 12px; padding: 10px; display: flex; gap: 6px; align-items: flex-end; flex-wrap: wrap; }
.quest__rod { width: 16px; height: 100px; background: repeating-linear-gradient(to top, var(--sky) 0 9px, #1c8fb8 9px 10px); border-radius: 3px; }
.quest__cubes { display: flex; flex-wrap: wrap; gap: 3px; width: 80px; margin-left: 10px; }
.quest__cube { width: 16px; height: 16px; background: var(--brick); border-radius: 3px; box-shadow: inset 0 -2px 0 #c99a12; }

.quest__spelt { min-height: 64px; border-bottom: 4px solid var(--navy); display: flex; gap: 4px; align-items: flex-end; padding: 6px; font-family: "Lilita One", sans-serif; font-size: 2.2rem; }
.quest__bricks { display: flex; flex-wrap: wrap; gap: 8px; }
.quest__brick { font: 400 1.8rem "Lilita One", sans-serif; width: 58px; height: 58px; border: 0; border-radius: 10px; background: var(--brick); color: var(--ink); box-shadow: 0 5px 0 #c99a12; cursor: pointer; }
.quest__brick:active { transform: translateY(3px); box-shadow: 0 2px 0 #c99a12; }

.quest__grownup { margin-top: 24px; background: rgba(255, 255, 255, 0.85); border-radius: 12px; padding: 10px 14px; font-size: 0.95rem; }
.quest__grownup summary { cursor: pointer; font-weight: 800; }
.quest__skip { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.quest__skip input { font: inherit; padding: 6px 10px; border-radius: 8px; border: 2px solid #c3d6e6; }
.quest__switch { font: inherit; background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 0; color: var(--ink); }

@media (max-width: 560px) {
  .quest { font-size: 17px; }
  .quest__prompt { font-size: 1.2rem; }
  .quest__brick { width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) { .quest * { transition: none !important; } }

/* "Ask a grown-up" card: two answers side by side */
.quest__choices { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }