.modal { width: min(520px, calc(100% - 28px)); border: 0; border-radius: 24px; padding: 34px; color: var(--ink); background: var(--cream); box-shadow: var(--shadow); }
.modal::backdrop { background: rgba(5,23,28,.62); backdrop-filter: blur(5px); }
.modal h2 { font-size: 35px; }
.close-btn { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #efe8da; color: var(--ink); font-size: 24px; }
.modal-icon { float: right; color: var(--gold); font-size: 30px; }
.question { margin: 18px 0; padding: 18px; border-radius: 14px; background: #f2ebdc; line-height: 1.55; font-size: 18px; }
.exercise-infinitive { color: #7b3f21; font-size: 1.08em; font-weight: 800; white-space: nowrap; }
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; }
.choice span { display: block; padding: 13px 15px; border: 2px solid #e2d8c7; border-radius: 12px; text-align: center; font-weight: 700; }
.choice input:checked + span { border-color: var(--teal); color: var(--teal); background: #e7f5f2; }
.feedback { display: none; margin-top: 14px; padding: 13px; border-radius: 12px; font-weight: 700; text-align: center; }
.feedback.success { display: block; background: #def3df; color: #21632d; }
.feedback.error { display: block; background: #fae1dc; color: #8d3424; }

.cape-modal {
  width: min(920px, calc(100% - 28px));
  max-height: calc(100% - 28px);
  overflow: auto;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 30px;
  padding: clamp(24px, 4vw, 42px);
  color: white;
  background: radial-gradient(circle at 82% 15%, rgba(255,211,112,.15), transparent 28%), linear-gradient(145deg, #123e4a, #061a22 78%);
  box-shadow: 0 30px 100px rgba(0,0,0,.55);
}
.cape-modal::backdrop { background: rgba(3,17,22,.76); backdrop-filter: blur(8px); }
.cape-modal[open] { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(330px, 1.1fr); gap: clamp(26px, 5vw, 65px); align-items: center; }
.cape-modal h2 { font-size: clamp(34px, 4.5vw, 52px); }
.cape-close { z-index: 5; color: white; background: rgba(255,255,255,.12); }
.cape-rule { color: rgba(255,255,255,.72); line-height: 1.55; }
.verb-ticket { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin: 22px 0; padding: 13px 17px; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; background: rgba(255,255,255,.08); }
.verb-ticket span { font-size: 12px; color: rgba(255,255,255,.65); }
.verb-ticket strong { color: #ffe09a; font-size: 22px; letter-spacing: .08em; }
.cape-copy label { margin-top: 18px; color: #ffe09a; }
.radical-field { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; }
.radical-field input { min-width: 0; }
.radical-field span { font-size: 25px; color: var(--gold); }
.radical-field b { font-size: 14px; white-space: nowrap; }
.cape-feedback { min-height: 48px; margin-top: 12px; padding: 12px 14px; border-radius: 12px; font-weight: 700; line-height: 1.4; }
.cape-feedback:empty { padding: 0; min-height: 0; }
.cape-feedback.success { color: #c9f5d1; background: rgba(87,186,107,.18); }
.cape-feedback.error { color: #ffd5c9; background: rgba(218,91,58,.2); }
.cape-preview { display: grid; place-items: center; min-height: 510px; }
.time-cape {
  --cape-color: #ad501e;
  position: relative;
  width: min(370px, 88vw);
  height: 480px;
  padding: 70px 65px 38px;
  color: #fffaf0;
  background: linear-gradient(100deg, rgba(0,0,0,.14), transparent 35%), var(--cape-color);
  clip-path: polygon(31% 0, 42% 7%, 56% 7%, 69% 0, 75% 18%, 99% 91%, 88% 97%, 50% 100%, 12% 97%, 1% 91%, 25% 18%);
  filter: drop-shadow(0 24px 24px rgba(0,0,0,.34));
  animation: cape-breathe 3s ease-in-out infinite;
}
.time-cape.blue { --cape-color: #08a8dc; }
.time-cape.brown { --cape-color: #b95319; }
.cape-neck { position: absolute; top: 8px; left: 50%; translate: -50%; width: 90px; height: 38px; border-bottom: 4px solid rgba(5,24,30,.75); border-radius: 0 0 50% 50%; }
.cape-content { display: grid; grid-template-columns: 1fr 78px; grid-template-rows: auto 1fr; column-gap: 14px; height: 315px; align-items: center; }
.cape-content small { grid-column: 1 / -1; text-align: center; font-weight: 800; letter-spacing: .16em; opacity: .88; }
.cape-formula { display: grid; justify-items: center; gap: 5px; font-family: Fraunces, serif; font-size: clamp(31px, 4vw, 45px); }
.cape-formula #cape-radical-preview { font-size: 24px; }
.cape-formula i { font-family: "DM Sans", sans-serif; font-size: 18px; font-style: normal; }
.cape-content ol { list-style: none; margin: 0; padding: 0; font-size: 28px; font-weight: 700; line-height: 1.42; }
.time-cape > p { margin: 12px 0 0; text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: .15em; opacity: .75; }

.flight-transition { position: fixed; z-index: 120; inset: 0; overflow: hidden; display: grid; place-items: center; visibility: hidden; opacity: 0; color: white; background: #092f42; perspective: 1000px; transition: opacity .25s, visibility .25s; }
.flight-transition.active { visibility: visible; opacity: 1; }
.flight-panorama { position: absolute; inset: -12%; background: linear-gradient(180deg, rgba(1,18,31,.08), rgba(3,20,27,.12)), url("../Asset/Scenes/Images/Transitions/SurvolVillageTemporel.png") center/cover no-repeat; transform: scale(1.12); filter: saturate(1.08); }
.flight-transition.active .flight-panorama { animation: panorama-flight 5.4s cubic-bezier(.2,.65,.35,1) forwards; }
.flight-transition.active.returning .flight-panorama { animation-direction: reverse; animation-timing-function: cubic-bezier(.35,1,.55,.25); }
.flight-panorama::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 84% 36%, rgba(255,239,165,.12), transparent 25%), linear-gradient(180deg, transparent 48%, rgba(4,19,27,.25)); }
.flight-transition[data-journey="blue"] .flight-panorama { background-image: linear-gradient(180deg, rgba(3,35,50,.04), rgba(2,38,53,.08)), url("../Asset/Scenes/Images/Transitions/SurvolVillageFutur.png"); }
.flight-transition.active[data-journey="blue"] .flight-panorama { animation-name: panorama-future-flight; }
.flight-speed-lines { position: absolute; z-index: 1; inset: -30%; opacity: 0; background: repeating-radial-gradient(ellipse at center, transparent 0 34px, rgba(255,245,191,.45) 36px, transparent 39px 72px); transform: scale(.4); }
.flight-transition.active .flight-speed-lines { animation: speed-burst 1.15s .05s ease-out both; }
.flight-transition.active.returning .flight-speed-lines { animation-delay: 3.7s; }
.time-loop { position: absolute; z-index: 1; left: 51%; top: 34%; width: min(52vw, 720px); aspect-ratio: 2 / 1; border: 6px solid rgba(255,229,137,.8); border-radius: 50%; opacity: 0; transform: rotate(-13deg) scale(.6); box-shadow: 0 0 20px #ffc94f, inset 0 0 20px #ffc94f; }
.time-loop i { position: absolute; width: 9px; aspect-ratio: 1; border-radius: 50%; background: white; box-shadow: 0 0 16px 5px #ffd464; }
.time-loop i:nth-child(1) { left: 8%; top: 25%; }
.time-loop i:nth-child(2) { right: 8%; top: 18%; }
.time-loop i:nth-child(3) { left: 48%; bottom: -6px; }
.flight-transition.active .time-loop { animation: loop-appear 2.25s 1.05s ease-in-out both; }
.flight-transition.active.returning .time-loop { animation-delay: 2.05s; animation-direction: reverse; }
.flight-transition[data-journey="blue"] .time-loop { left: 21%; top: 25%; width: min(42vw, 610px); aspect-ratio: 1; border-width: 9px; border-color: rgba(103,245,255,.88); box-shadow: 0 0 26px #43e4ff, inset 0 0 30px #43e4ff; transform: rotate(0) scale(.45); }
.flight-transition.active[data-journey="blue"] .time-loop { animation-name: future-portal; animation-duration: 2.35s; animation-delay: .8s; }
.flight-transition.active.returning[data-journey="blue"] .time-loop { animation-delay: 1.95s; animation-direction: reverse; }
.time-stars { position: absolute; z-index: 1; inset: -50%; background-image: radial-gradient(circle, #ffe59d 0 1.5px, transparent 3px); background-size: 75px 75px; opacity: 0; }
.flight-transition.active .time-stars { animation: stars-rush 1.1s linear 3; }
.flying-hero { position: relative; z-index: 3; width: 155px; height: 270px; transform: translate3d(-78vw, 31vh, 0) rotate(18deg) scale(.58); filter: drop-shadow(0 18px 14px rgba(4,19,25,.45)); }
.flight-transition.active .flying-hero { animation: hero-cinematic-flight 5.2s cubic-bezier(.3,.2,.25,1) forwards; }
.flight-transition.active[data-journey="blue"] .flying-hero { animation-name: hero-future-flight; }
.flight-transition.active.returning .flying-hero { animation-direction: reverse; animation-timing-function: cubic-bezier(.3,.2,.25,1); }
.flight-transition.active.returning .flying-character.complete-cape-character { transform: rotate(-90deg) scaleX(-1); }
.flying-character { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.flying-character.complete-cape-character { inset: -24% -58%; width: 216%; height: 148%; object-fit: contain; filter: drop-shadow(0 10px 9px rgba(0,0,0,.25)); }
.flying-cape { --cape-color: #b95319; position: absolute; z-index: 1; top: 59px; left: -48px; width: 125px; height: 172px; display: grid; place-items: center; clip-path: polygon(85% 0, 100% 16%, 82% 100%, 0 78%, 25% 21%); background: linear-gradient(105deg, rgba(0,0,0,.2), transparent 40%), var(--cape-color); transform-origin: 90% 15%; animation: cape-flutter .38s ease-in-out infinite alternate; filter: drop-shadow(0 8px 5px rgba(0,0,0,.28)); }
.flying-cape.integrated-cape { display: none; }
.flying-cape.blue { --cape-color: #08a8dc; }
.flying-cape.brown { --cape-color: #b95319; }
.flying-cape span { transform: rotate(-70deg); font-size: 17px; font-weight: 800; }
.landing-glow { position: absolute; z-index: 2; right: 7%; bottom: -18%; width: 34vw; aspect-ratio: 1; border-radius: 50%; opacity: 0; background: rgba(255,240,176,.75); box-shadow: 0 0 80px 30px #ffd567, 0 0 190px 100px rgba(255,189,61,.55); transform: scale(.15); }
.flight-transition.active .landing-glow { animation: landing-glow 1.5s 3.75s ease-in both; }
.flight-transition.active.returning .landing-glow { right: auto; left: 3%; animation-delay: 3.8s; }
.flight-copy { position: absolute; z-index: 4; bottom: 7vh; left: 50%; translate: -50%; width: min(760px, 90vw); padding: 18px 26px; text-align: center; opacity: 0; text-shadow: 0 3px 18px rgba(0,0,0,.65); }
.flight-transition.active .flight-copy { animation: flight-copy 5.15s .1s ease forwards; }
.flight-copy p { color: #ffe09a; font-weight: 800; letter-spacing: .07em; }
.flight-copy h2 { font-size: clamp(28px, 5vw, 52px); }

@keyframes cape-breathe { 50% { transform: rotate(1deg) scale(1.015); } }
@keyframes cape-flutter { to { transform: rotate(-5deg) skewY(5deg); } }
@keyframes panorama-flight {
  0% { transform: scale(1.3) translate3d(7%, 6%, 0); filter: saturate(1.08) blur(3px); }
  22% { transform: scale(1.15) translate3d(0, 0, 0); filter: saturate(1.08) blur(0); }
  62% { transform: scale(1.32) translate3d(-5%, 2%, 0); }
  100% { transform: scale(1.72) translate3d(-12%, 8%, 0); filter: saturate(1.16) brightness(1.12); }
}
@keyframes panorama-future-flight {
  0% { transform: scale(1.38) translate3d(9%, 8%, 0); filter: saturate(1.02) blur(3px); }
  25% { transform: scale(1.22) translate3d(3%, 3%, 0); filter: saturate(1.08) blur(0); }
  58% { transform: scale(1.36) translate3d(-5%, 1%, 0); }
  100% { transform: scale(1.82) translate3d(-16%, 9%, 0); filter: saturate(1.2) brightness(1.12); }
}
@keyframes speed-burst {
  0% { opacity: 0; transform: scale(.35); }
  35% { opacity: .65; }
  100% { opacity: 0; transform: scale(1.45); }
}
@keyframes loop-appear {
  0% { opacity: 0; transform: rotate(-13deg) scale(.55); }
  24%, 76% { opacity: .92; }
  100% { opacity: 0; transform: rotate(-13deg) scale(1.15); }
}
@keyframes future-portal {
  0% { opacity: 0; transform: rotate(0) scale(.35); }
  22%, 78% { opacity: .96; }
  48% { transform: rotate(18deg) scale(1.03); }
  100% { opacity: 0; transform: rotate(35deg) scale(1.5); }
}
@keyframes stars-rush { 0% { opacity: .1; transform: rotate(0) scale(.75); } 50% { opacity: .55; } 100% { opacity: 0; transform: rotate(8deg) scale(1.3); } }
@keyframes hero-cinematic-flight {
  0% { transform: translate3d(-78vw, 31vh, 0) rotate(20deg) scale(.58); }
  19% { transform: translate3d(-23vw, 4vh, 160px) rotate(5deg) scale(.95); }
  32% { transform: translate3d(5vw, -11vh, 220px) rotate(-14deg) scale(1.12); }
  43% { transform: translate3d(17vw, -17vh, 100px) rotate(-115deg) scale(.94); }
  53% { transform: translate3d(10vw, 1vh, 10px) rotate(-230deg) scale(.82); }
  62% { transform: translate3d(-3vw, -4vh, 150px) rotate(-360deg) scale(1.02); }
  75% { transform: translate3d(18vw, -8vh, 20px) rotate(-370deg) scale(.78); }
  88% { transform: translate3d(37vw, 17vh, -100px) rotate(-350deg) scale(.52); }
  100% { transform: translate3d(50vw, 39vh, -280px) rotate(-360deg) scale(.2); opacity: .2; }
}
@keyframes hero-future-flight {
  0% { transform: translate3d(-75vw, 35vh, 0) rotate(23deg) scale(.56); }
  20% { transform: translate3d(-33vw, 13vh, 180px) rotate(2deg) scale(.9); }
  37% { transform: translate3d(-17vw, -2vh, 80px) rotate(-12deg) scale(.72); }
  49% { transform: translate3d(-5vw, -6vh, -180px) rotate(-5deg) scale(.38); filter: brightness(1.8) drop-shadow(0 0 25px #77f7ff); }
  59% { transform: translate3d(4vw, -8vh, 100px) rotate(4deg) scale(.88); filter: brightness(1.1) drop-shadow(0 15px 13px rgba(4,19,25,.4)); }
  76% { transform: translate3d(24vw, -15vh, 40px) rotate(-11deg) scale(.68); }
  90% { transform: translate3d(39vw, -4vh, -120px) rotate(7deg) scale(.42); }
  100% { transform: translate3d(52vw, 14vh, -280px) rotate(15deg) scale(.18); opacity: .2; }
}
@keyframes landing-glow {
  0% { opacity: 0; transform: scale(.12); }
  68% { opacity: .9; transform: scale(.45); }
  100% { opacity: 1; transform: scale(1.5); }
}
@keyframes flight-copy { 7%, 66% { opacity: 1; transform: translateY(0); } 83%, 100% { opacity: 0; transform: translateY(-14px); } }
.progress-modal { text-align: center; }
.progress-ring { --progress: 0deg; width: 145px; aspect-ratio: 1; margin: 24px auto; border-radius: 50%; display: grid; place-content: center; background: radial-gradient(circle, var(--cream) 59%, transparent 61%), conic-gradient(var(--gold) var(--progress), #e8e0d1 0); }
.progress-ring strong { display: block; font-family: Fraunces, serif; font-size: 32px; }
.progress-ring span { font-size: 11px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { background: #f1e9da; border-radius: 13px; padding: 14px 8px; }
.stat strong { display: block; font-size: 22px; }
.stat span { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.text-btn { margin-top: 24px; border: 0; background: none; color: #986138; text-decoration: underline; }
.toast { position: fixed; z-index: 30; left: 50%; bottom: 28px; translate: -50% 30px; opacity: 0; color: white; background: #173d45; padding: 12px 18px; border-radius: 99px; box-shadow: var(--shadow); transition: .3s; pointer-events: none; }
.toast.show { opacity: 1; translate: -50% 0; }

/* Médiathèque : livres, radios et jeux */
.media-library-modal { width: min(980px, calc(100% - 28px)); max-height: calc(100% - 28px); overflow: auto; border: 0; border-radius: 28px; padding: clamp(26px, 4vw, 46px); color: var(--ink); background: #f8f1e5; box-shadow: var(--shadow); }
.media-library-modal::backdrop { background: rgba(5,23,28,.68); backdrop-filter: blur(7px); }
.media-library-modal h2 { font-size: clamp(34px, 5vw, 52px); }
.media-close-btn { z-index: 4; }
.media-library-intro { margin: 7px 0 28px; color: #6f6558; }
.book-shelf { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.book-card { display: grid; grid-template-columns: 110px 1fr; gap: 18px; align-items: stretch; padding: 0; overflow: hidden; border: 1px solid #dfd2be; border-radius: 18px; text-align: left; color: inherit; background: #fffaf1; box-shadow: 0 10px 25px rgba(48,37,23,.08); }
.book-card img { width: 100%; height: 165px; object-fit: cover; }
.book-card > span { display: flex; flex-direction: column; justify-content: center; padding: 15px 15px 15px 0; }
.book-card small, .game-choice-card small, .radio-card small { color: #a36936; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.book-card strong { margin: 8px 0; font-family: Fraunces, serif; font-size: 20px; }
.book-card em { color: #71675b; font-size: 13px; font-style: normal; line-height: 1.4; }
.media-back-btn { display: inline-flex; margin-bottom: 20px; border: 0; color: #815531; background: none; font-weight: 700; }
.story-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.grammar-toggle { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; white-space: nowrap; color: #5f5549; font-weight: 700; }
.grammar-toggle input { position: absolute; opacity: 0; }
.grammar-toggle > span { width: 42px; height: 23px; padding: 3px; border-radius: 99px; background: #d9cdbd; transition: .2s; }
.grammar-toggle > span::after { content: ""; display: block; width: 17px; height: 17px; border-radius: 50%; background: white; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: .2s; }
.grammar-toggle input:checked + span { background: #287b74; }
.grammar-toggle input:checked + span::after { translate: 19px; }
.story-paper { min-height: 320px; display: flex; flex-direction: column; justify-content: space-between; margin-top: 24px; padding: clamp(26px, 5vw, 60px); border: 1px solid #e1d5c2; border-radius: 8px 22px 22px 8px; background: #fffdf8; box-shadow: inset 9px 0 16px rgba(94,65,35,.07), 0 18px 38px rgba(75,54,31,.1); }
.story-paper > p { max-width: 760px; margin: auto; font-family: Fraunces, serif; font-size: clamp(21px, 3vw, 29px); line-height: 1.85; }
.story-paper mark { color: inherit; background: none; }
.show-grammar .grammar-sujet { text-decoration: underline 4px #efad74; text-decoration-skip-ink: none; text-underline-offset: 5px; }
.show-grammar .grammar-verbe { text-decoration: underline 4px #ef8d89; text-decoration-skip-ink: none; text-underline-offset: 5px; }
.story-paper footer { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 30px; color: #807466; font-size: 13px; }
.story-paper footer button { width: 38px; height: 38px; border: 1px solid #d8cbbb; border-radius: 50%; color: #70543a; background: #f6ecdc; }
.story-paper footer button:disabled { opacity: .35; }
.story-extras { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 16px; color: #766a5c; font-size: 13px; }
.story-extras p { margin: 0; }
.story-extras .media-back-btn { margin: 0 0 0 auto; }
.story-audio-panel { flex: 1 1 620px; padding: 14px 16px; border: 1px solid #dfd2be; border-radius: 18px; background: #fffaf1; box-shadow: 0 8px 22px rgba(48,37,23,.06); }
.story-audio-tools { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 11px; }
.story-auto-toggle { margin: 0; font-size: 13px; }
.replay-story-page { padding: 9px 14px; border: 1px solid #d3c2aa; border-radius: 99px; color: #704d30; background: #f5e8d4; font-weight: 700; }
.replay-story-page:hover { background: #ecd9bc; }
.story-audio-panel audio { display: block; width: 100%; height: 36px; }
.story-phrase { border-radius: 6px; transition: color .3s ease, background-color .35s ease, box-shadow .35s ease, opacity .3s ease; }
.audio-synced .story-phrase { opacity: .52; }
.audio-synced .story-phrase.read { opacity: .78; }
.audio-synced .story-phrase.active { opacity: 1; background: #fff0ad; box-shadow: 0 0 0 4px #fff0ad; }
.radio-stations { display: grid; gap: 12px; }
.radio-card { display: grid; grid-template-columns: 55px 1fr auto; gap: 17px; align-items: center; padding: 18px; border: 1px solid #dfd2be; border-radius: 17px; background: #fffaf1; }
.radio-card.playing { border-color: #398d84; box-shadow: 0 0 0 3px rgba(57,141,132,.12); }
.radio-icon { display: grid; place-items: center; width: 50px; aspect-ratio: 1; border-radius: 50%; color: white; background: #c8794b; font-size: 22px; }
.radio-card h3 { margin: 3px 0; font-family: Fraunces, serif; font-size: 22px; }
.radio-card p { margin: 0; color: #766b5e; font-size: 13px; }
.radio-actions { display: flex; flex-direction: column; gap: 7px; }
.radio-card button { min-width: 112px; padding: 10px 14px; border: 0; border-radius: 99px; color: white; background: #247a73; font-weight: 700; }
.radio-card .lyrics-btn { color: #744820; background: #f1d89e; }
.radio-card button:disabled { color: #756b5f; background: #e5dac9; }
.ambience-modal h2 { font-size: 29px; line-height: 1.15; }
.ambience-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 25px; }
.lyrics-modal h2 { padding-right: 25px; font-size: 31px; }
.lyrics-text { display: grid; gap: 8px; margin: 24px 0; padding: 24px; border-radius: 18px; color: #fff8e8; background: linear-gradient(145deg, #194d57, #0a2932); font-family: Fraunces, serif; font-size: 22px; line-height: 1.35; text-align: center; }
.lyrics-note { color: #75695c; font-size: 13px; line-height: 1.5; }
.token-balance { display: inline-flex; gap: 8px; padding: 10px 15px; border-radius: 99px; color: #574526; background: #f0d99d; }
.game-choice-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 22px; }
.game-choice-card { display: grid; grid-template-rows: 170px 1fr; gap: 18px; align-items: stretch; padding: 16px; border: 1px solid #ded0ba; border-radius: 22px; background: #fffaf1; }
.game-choice-visual { min-height: 210px; display: grid; place-items: center; border-radius: 16px; color: #ffe6a3; background: linear-gradient(145deg, #194d57, #0a2932); font-family: Fraunces, serif; font-size: 42px; letter-spacing: .15em; }
.game-choice-card h3 { margin: 8px 0; font-family: Fraunces, serif; font-size: 29px; }
.game-choice-card p, .coming-games { color: #756a5e; line-height: 1.55; }
.game-choice-card .primary-btn { width: auto; margin-top: 8px; }
.game-choice-card .primary-btn span { margin-left: 18px; }
.puzzle-preview { grid-template-columns: repeat(2, 55px); grid-template-rows: repeat(2, 55px); gap: 5px; }
.puzzle-preview i { display: block; border: 2px solid rgba(255,255,255,.6); border-radius: 7px; background: rgba(255,226,160,.14); }
.coming-games { text-align: center; font-size: 13px; }
.memory-status { min-height: 24px; color: #4d655b; font-weight: 700; }
.memory-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 650px; margin: 24px auto 0; }
.memory-card { position: relative; min-height: 115px; padding: 0; border: 0; border-radius: 15px; background: #174d57; transform-style: preserve-3d; transition: transform .35s; }
.memory-card.revealed, .memory-card.matched { transform: rotateY(180deg); }
.memory-card.matched { box-shadow: 0 0 0 4px #e3b553; }
.memory-back, .memory-front { position: absolute; inset: 0; display: grid; place-content: center; border-radius: inherit; backface-visibility: hidden; }
.memory-back { color: #ffe2a0; font-family: Fraunces, serif; font-size: 38px; }
.memory-front { color: #744d2e; background: #fff8ea; transform: rotateY(180deg); font-size: 33px; }
.memory-front small { display: block; margin-top: 5px; font-size: 10px; text-transform: uppercase; }
.puzzle-heading { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.puzzle-heading > span { color: #8b6848; font-size: 13px; font-weight: 700; }
.puzzle-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:22px; }
.puzzle-card { overflow:hidden; display:grid; grid-template-columns:minmax(130px,.8fr) minmax(0,1.2fr); border:1px solid #ded0ba; border-radius:18px; background:#fffaf1; box-shadow:0 8px 22px rgba(61,45,25,.08); }
.puzzle-card.active { border-color:#d3a73e; box-shadow:0 0 0 3px rgba(211,167,62,.18),0 8px 22px rgba(61,45,25,.08); }
.puzzle-card img { width:100%; height:100%; min-height:190px; object-fit:cover; }
.puzzle-card>div { display:flex; align-items:flex-start; flex-direction:column; padding:16px; }
.puzzle-card small { color:#9b6b2f; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.puzzle-card h3 { margin:7px 0 6px; font-family:Fraunces,serif; font-size:21px; line-height:1.12; }
.puzzle-card p { margin:0 0 13px; color:#756a5e; font-size:12px; line-height:1.45; }
.puzzle-card button { width:100%; margin-top:auto; padding:10px 12px; border:0; border-radius:11px; color:#4c370e; background:var(--gold); font-weight:800; text-align:left; }
.puzzle-card button span { float:right; }
.puzzle-reference { width:min(540px,80vw); margin:10px auto 0; color:#765b39; font-size:12px; font-weight:700; text-align:center; }
.puzzle-reference summary { cursor:pointer; }
.puzzle-reference img { display:block; width:min(220px,55vw); margin:10px auto; border:4px solid white; border-radius:12px; box-shadow:0 8px 20px rgba(31,42,38,.16); }
.puzzle-board { width:min(540px,80vw); aspect-ratio:1; display:grid; grid-template-columns:repeat(var(--puzzle-size),1fr); grid-template-rows:repeat(var(--puzzle-size),1fr); gap:3px; margin:16px auto 0; padding:5px; border-radius:15px; background:#173f48; box-shadow:0 18px 35px rgba(31,42,38,.18); }
.puzzle-tile { position:relative; min-width:0; min-height:0; padding:0; border:0; border-radius:5px; color:white; background-image:linear-gradient(rgba(9,32,38,.08),rgba(9,32,38,.08)),var(--puzzle-image); background-size:calc(var(--puzzle-size) * 100%) calc(var(--puzzle-size) * 100%); background-position:var(--tile-position-x) var(--tile-position-y); box-shadow:inset 0 0 0 1px rgba(255,255,255,.38); }
.puzzle-tile span { position: absolute; right: 6px; bottom: 6px; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: #402d17; background: rgba(255,230,166,.9); font-size: 11px; font-weight: 800; }
.puzzle-tile.empty { background: rgba(255,255,255,.06); }
.puzzle-board.completed { gap: 0; padding: 0; overflow: hidden; box-shadow: 0 0 0 5px #e3b553, 0 18px 35px rgba(31,42,38,.18); }
.puzzle-board.completed .puzzle-tile { border-radius: 0; pointer-events: none; }
.puzzle-board.completed .puzzle-tile span { display: none; }
.art-preview { gap: 14px; color: #fff3c4; letter-spacing: .02em; }
.art-preview span { color: #ef8d89; }
.resume-artwork { width: 100%; display: grid; grid-template-columns: 42px 1fr; gap: 2px 12px; align-items: center; margin: 0 0 20px; padding: 15px 18px; border: 2px solid #d2a84f; border-radius: 16px; color: #513d20; text-align: left; background: #fff1bd; }
.resume-artwork > span { grid-row: span 2; font-size: 25px; }
.resume-artwork small { color: #7a684b; }
.coloring-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.coloring-card { overflow: hidden; padding: 0; border: 1px solid #dcd0bd; border-radius: 17px; color: #4a3d31; text-align: left; background: white; box-shadow: 0 8px 22px rgba(61,45,25,.08); }
.coloring-card img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; }
.coloring-card span { display: block; padding: 13px; }
.coloring-card strong, .coloring-card small { display: block; }
.coloring-card small { margin-top: 4px; color: #8b6b49; }
.free-drawing-card { width: 100%; display: grid; grid-template-columns: 55px 1fr; gap: 2px 14px; align-items: center; margin-top: 15px; padding: 18px; border: 2px dashed #c9b99e; border-radius: 17px; color: #514436; text-align: left; background: rgba(255,255,255,.5); }
.free-drawing-card > span { grid-row: span 2; display: grid; place-items: center; width: 50px; aspect-ratio: 1; border-radius: 50%; color: white; background: #287b74; font-size: 24px; }
.free-drawing-card small { color: #837668; }
.art-studio-heading { display: flex; align-items: end; gap: 22px; }
.art-studio-heading .media-back-btn { flex: none; }
.art-studio-heading h2 { font-size: clamp(27px, 4vw, 40px); }
.art-toolbar { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: 18px 0 10px; padding: 10px; border-radius: 14px; background: #e9dfcf; }
.art-toolbar button, .art-toolbar label { min-height: 38px; display: flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid #d1c2ad; border-radius: 9px; color: #5c4b3c; background: #fffaf1; font-weight: 700; font-size: 12px; }
.art-toolbar button.active { color: white; border-color: #287b74; background: #287b74; }
.art-toolbar button:disabled { opacity: .4; }
.art-toolbar input[type="color"] { width: 27px; height: 25px; padding: 0; border: 0; background: none; }
.art-toolbar input[type="range"] { width: 85px; }
.art-toolbar .print-art { margin-left: auto; color: white; border-color: #a66b34; background: #a66b34; }
.quick-colors { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.quick-colors button { width: 31px; aspect-ratio: 1; padding: 0; border: 3px solid white; border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 1px #b9aa94; }
.art-canvas-wrap { display: grid; place-items: center; overflow: auto; max-height: 68vh; padding: 12px; border-radius: 16px; background: #173f48; }
#art-canvas { display: block; width: min(100%, 620px); height: auto; background: white; box-shadow: 0 5px 18px rgba(0,0,0,.3); touch-action: none; cursor: crosshair; }
.art-status { margin: 8px 0 0; color: #786b5d; font-size: 12px; text-align: center; }
.print-frame { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.origami-preview { display: flex; gap: 13px; font-size: 36px; }
.origami-preview span:nth-child(2) { color: #7dd1c4; }
.origami-preview span:nth-child(3) { color: #ffd678; }
.origami-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.origami-card { padding: 17px; border: 1px solid #d9ccb8; border-radius: 19px; background: #fffaf1; }
.origami-card > div { display: grid; place-items: center; height: 190px; margin-bottom: 14px; border-radius: 13px; background: #edf4f1; }
.origami-card svg, .origami-diagram svg { width: 100%; height: 100%; fill: #fffdf6; stroke: #284d52; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.origami-card svg { max-width: 250px; }
.origami-card svg .fold, .origami-diagram svg .fold { fill: none; stroke-dasharray: 9 7; stroke: #c27755; }
.origami-card svg .arrow, .origami-diagram svg .arrow { fill: none; stroke: #c27755; }
.origami-card svg .accent, .origami-diagram svg .accent { fill: #bce3db; }
.origami-card svg .paper, .origami-diagram svg .paper { fill: #fff7dc; }
.origami-card svg .ink, .origami-diagram svg .ink { fill: #284d52; stroke: none; }
.origami-card small { color: #a36936; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.origami-card h3 { margin: 6px 0; font-family: Fraunces, serif; font-size: 24px; }
.origami-card p { margin: 0 0 14px; color: #74685b; font-size: 13px; }
.origami-card button { width: 100%; padding: 12px; border: 0; border-radius: 11px; color: white; background: #287b74; font-weight: 800; }
.origami-sheet-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.origami-sheet-heading h2 { font-size: clamp(30px, 5vw, 45px); }
.origami-sheet-heading p { margin: 4px 0 0; color: #76695b; }
.origami-sheet-heading .primary-btn { width: auto; flex: none; }
.origami-step-card { display: grid; grid-template-columns: minmax(280px, 1fr) 1fr; gap: 28px; align-items: center; margin-top: 23px; padding: 23px; border: 1px solid #d9ccb8; border-radius: 21px; background: #fffaf1; }
.origami-diagram { height: 340px; padding: 15px; border-radius: 15px; background: #edf4f1; }
.origami-step-card small { color: #a36936; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.origami-step-card p { font-family: Fraunces, serif; font-size: clamp(21px, 3vw, 29px); line-height: 1.45; }
.origami-navigation { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 16px; }
.origami-navigation > button { padding: 11px 15px; border: 1px solid #cabba5; border-radius: 99px; color: #604b37; background: #fff8ec; font-weight: 700; }
.origami-navigation > button:disabled { opacity: .35; }
#origami-dots { display: flex; gap: 5px; }
#origami-dots i { width: 7px; height: 7px; border-radius: 50%; background: #cbbda8; }
#origami-dots i.active { width: 20px; border-radius: 99px; background: #287b74; }
.lighthouse-mission-modal { width: min(820px, calc(100% - 28px)); max-height: calc(100% - 28px); overflow: auto; border: 1px solid rgba(255,255,255,.4); border-radius: 27px; padding: clamp(25px, 4vw, 42px); color: #173743; background: linear-gradient(145deg, #fffdf6, #f3ead7); box-shadow: var(--shadow); }
.er-mission-modal { width: min(980px, calc(100% - 28px)); }
.er-mission-nav { display:flex; gap:8px; margin:0 42px 24px 0; padding-bottom:4px; overflow-x:auto; }
.er-mission-nav button { position:relative; flex:1 0 145px; min-height:68px; padding:10px 12px; border:1px solid #d6c7ae; border-radius:13px; color:#405d61; background:rgba(255,255,255,.7); text-align:left; }
.er-mission-nav button:hover:not(:disabled) { border-color:#287b74; background:white; }
.er-mission-nav button.active { border-color:#287b74; color:white; background:#287b74; box-shadow:0 7px 17px rgba(40,123,116,.2); }
.er-mission-nav button:disabled { cursor:not-allowed; opacity:.48; }
.er-mission-nav span,.er-mission-nav small { display:block; }
.er-mission-nav span { font-weight:850; }
.er-mission-nav small { margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; }
.er-mission-nav i { position:absolute; top:8px; right:9px; font-style:normal; font-size:11px; }
.lighthouse-mission-modal::backdrop { background: rgba(4,23,29,.7); backdrop-filter: blur(7px); }
.lighthouse-mission-modal h2 { padding-right: 35px; font-size: clamp(31px, 5vw, 46px); }
.lighthouse-instruction { margin: 7px 0 20px; color: #5e7377; }
.lighthouse-question { padding: 18px; border-radius: 14px; background: white; font-size: 20px; font-weight: 700; }
.lighthouse-question mark { color: #a74335; background: #ffe1da; }
#lighthouse-answer-form > .primary-btn { margin-top: 14px; }
.lighthouse-feedback { min-height: 22px; margin: 13px 0; padding: 10px; border-radius: 10px; text-align: center; font-weight: 700; }
.lighthouse-feedback:empty { padding: 0; }
.lighthouse-feedback.success { color: #246738; background: #dff2df; }
.lighthouse-feedback.error { color: #93392c; background: #f8dfd9; }
.lighthouse-next { width: auto; margin-left: auto; }
.mission-finish { padding: 35px; border-radius: 18px; text-align: center; background: white; }
.mission-finish span { color: var(--gold); font-size: 35px; }
.mission-finish h3 { font-family: Fraunces, serif; font-size: 36px; }
.sort-verbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-bottom: 18px; }
.sort-verbs button { padding: 11px 17px; border: 2px solid #d8c8ad; border-radius: 99px; color: #234b52; background: white; font-weight: 800; }
.sort-verbs button.selected { border-color: #d99a38; background: #fff0c9; }
.sort-zones { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.sort-zones button { min-height: 105px; padding: 9px; border: 2px dashed #c9b797; border-radius: 13px; color: #5f513e; background: rgba(255,255,255,.5); }
.sort-zones button strong, .sort-zones button span { display: block; }
.sort-zones button span { margin-top: 12px; color: #26746e; font-weight: 800; }
.sort-zones button.filled { border-style: solid; border-color: #68a89a; background: #e3f2ed; }
.lighthouse-memory { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.lighthouse-memory button { position: relative; min-height: 100px; border: 0; border-radius: 13px; color: white; background: #164c57; transform-style: preserve-3d; transition: transform .3s; }
.lighthouse-memory button span, .lighthouse-memory button strong { position: absolute; inset: 0; display: grid; place-items: center; padding: 7px; border-radius: inherit; backface-visibility: hidden; }
.lighthouse-memory button span { color: #ffe09a; font-size: 28px; }
.lighthouse-memory button strong { color: #4e3924; background: #fff8e8; transform: rotateY(180deg); font-size: 12px; }
.lighthouse-memory button.open, .lighthouse-memory button.matched { transform: rotateY(180deg); }
.lighthouse-memory button.matched { box-shadow: 0 0 0 3px #dfa933; }
.er-verb-title { text-align:center;font-family:Fraunces,serif;font-size:30px;color:#287b74; }
.er-match { display:grid;grid-template-columns:1fr 1fr;gap:18px; }
.er-match>div { display:grid;gap:7px; }
.er-match button { padding:11px;border:2px solid #ddd0bb;border-radius:11px;background:white;font-weight:800; }
.er-match [data-match-pronoun] { border-left:8px solid var(--pcolor); }
.er-match button.selected { background:#fff0c8;border-color:#dda640; }.er-match button.matched{background:#dff2df;border-color:#66a774;}
.choice-button { padding:14px;border:2px solid #ded1bd;border-radius:12px;background:white;font-weight:800; }
.er-grid-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.er-grid-chips button{padding:8px 11px;border:2px solid #d9c9af;border-radius:99px;background:white;font-weight:700}
.er-grid{display:grid;grid-template-columns:minmax(100px,.8fr) repeat(2,1fr);gap:5px}.er-grid>strong,.er-grid>b,.er-grid>button{min-height:45px;display:grid;place-items:center;padding:6px;border-radius:8px}.er-grid>strong{background:#174d57;color:white}.er-grid>b{border-left:7px solid color-mix(in srgb,var(--pcolor) 72%,#000);background:var(--pcolor);color:#173038;font-size:12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}.er-grid>button{border:2px dashed #cbb99d;background:rgba(255,255,255,.5);font-size:12px}.er-grid>button.filled{border-style:solid;border-color:#65a697;background:#e1f2ed;font-weight:800}
.er-write-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.er-write-grid label{display:grid;grid-template-columns:1fr 90px;align-items:center;border-left:8px solid var(--pcolor);padding:7px 10px;border-radius:9px;background:white;font-weight:700}.er-write-grid input{text-align:center}.er-write-grid .primary-btn{grid-column:1/-1}
.er-write-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.er-write-columns section{display:grid;gap:10px;align-content:start}.er-write-columns h4{margin:0;padding:11px;border-radius:10px;text-align:center;color:white;background:#174d57;font-size:13px}.er-write-columns label{display:grid;grid-template-columns:minmax(105px,.72fr) minmax(175px,1.28fr);align-items:center;column-gap:12px;min-height:64px;border-left:8px solid var(--pcolor);padding:9px 14px;border-radius:11px;background:white;font-weight:700}.er-write-columns label>span:first-child{line-height:1.25}.er-write-columns .primary-btn{grid-column:1/-1}
.er-ending-field{display:flex;align-items:stretch;justify-content:flex-start;min-width:0}.er-ending-field b{display:flex;align-items:center;flex:0 0 auto;min-width:0;padding:10px 12px;color:#31565c;background:#edf3f0;border-radius:8px 0 0 8px;white-space:nowrap}.er-ending-field input{flex:1 1 92px;width:92px;min-width:78px;padding-right:8px;padding-left:8px;border-radius:0 8px 8px 0;border-left:0;text-align:center;font-size:17px;font-weight:800}.er-ending-field>input:only-child{width:100%;min-width:140px;border-left:1px solid #d4ded9;border-radius:8px}
.ir-double-s{font-weight:900;text-decoration:underline 2px;text-underline-offset:3px;color:#a33f32}
.er-sentence-inline .lighthouse-question{display:flex;flex-wrap:wrap;align-items:center;gap:7px}.er-sentence-inline input{width:160px;min-width:110px;padding:9px 5px 7px;border:0;border-radius:0;text-align:center;background-color:transparent;background-image:repeating-linear-gradient(90deg,#9a7045 0 12px,transparent 12px 17px);background-size:100% 2px;background-position:left bottom;background-repeat:no-repeat;outline-offset:4px}.er-sentence-inline>.primary-btn{width:auto}
.er-radical-form{display:grid;gap:12px;justify-items:center}.er-radical-form .lighthouse-question{width:100%;text-align:center}.er-radical-form>input{width:min(300px,100%);padding:13px;text-align:center;font-size:19px;font-weight:800}.er-radical-form>.primary-btn{width:auto}.er-form-hint{margin:-4px 0 2px;color:#687b7e;text-align:center;font-size:13px}
.er-text-form>p{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;padding:20px;border-radius:15px;background:white;font-family:Fraunces,serif;font-size:20px;line-height:2.25}.er-text-blank{display:inline-grid;grid-template-rows:auto auto;vertical-align:middle}.er-text-blank input{width:145px;padding:7px 6px 5px;border:0;border-bottom:2px dashed #a57345;border-radius:0;text-align:center;background:#fff8df;font:700 17px system-ui}.er-text-blank small{color:#684b35;text-align:center;font:700 15px/1.35 system-ui}.er-text-form>.primary-btn{width:auto}
@media(max-width:620px){.er-text-form>p{font-size:17px}.er-text-blank input{width:125px}}
.time-family-modal { width:min(680px,calc(100% - 32px)); }
.time-family-modal > p:not(.eyebrow) { color:#6d716d; }
.time-family-choices { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-top:22px; }
.time-family-choices button { padding:15px; border:1px solid #d8d3c8; border-radius:13px; color:#173743; background:#fff; font-weight:750; text-align:left; }
.time-family-choices button:first-child { color:white; background:#157b7d; border-color:#157b7d; }
.journey-verb-modal{width:min(720px,calc(100% - 32px))}.journey-verb-modal>p:not(.eyebrow){color:#6d716d}.journey-verb-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:22px}.journey-verb-choices button{display:grid;gap:4px;padding:15px;border:1px solid #d8d3c8;border-radius:13px;color:#173743;background:#fff;text-align:left}.journey-verb-choices button:hover{border-color:#157b7d;background:#edf7f3}.journey-verb-choices small{color:#77766f;font-size:11px}