
/* Update 33 — Flork motivation + motion polish + layout hardening */
:root{--ease-flork:cubic-bezier(.22,1,.36,1);--ease-soft:cubic-bezier(.2,.8,.2,1)}
html{scroll-behavior:smooth}
#app{isolation:isolate}
#app>section,#app>div{animation:florkPageEnter33 .34s var(--ease-flork) both;transform-origin:50% 0}
@keyframes florkPageEnter33{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes florkMenuIn33{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes florkModalIn33{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes florkFeedbackIn33{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.nav-dropdown.open .world-menu,.world-menu.portal-open{animation:florkMenuIn33 .18s var(--ease-flork) both;transform-origin:top center}
.modal.show .modal-dialog{animation:florkModalIn33 .22s var(--ease-flork) both}
.feedback.show,.rw25-feedback.show,.task-solution.show,.sample-solution.show{animation:florkFeedbackIn33 .22s var(--ease-flork) both}
.btn,.card-link,.nav-link,.nav-dropdown-btn,.world-option,.chip,.tool-btn,.vocab-grade-btn,.ww28-step,.ww31-step,.ww29-stage-tab{transition:transform .18s var(--ease-soft),box-shadow .18s var(--ease-soft),background-color .18s ease,border-color .18s ease,color .18s ease,opacity .18s ease}
@media (hover:hover) and (pointer:fine){
 .card-link:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(65,52,40,.11)}
 .btn:hover,.nav-link:hover,.nav-dropdown-btn:hover,.world-option:hover,.tool-btn:hover{transform:translateY(-1px)}
 .btn:active,.nav-link:active,.nav-dropdown-btn:active{transform:translateY(0) scale(.985)}
}
.progress-fill,.ww29-fill,.ww30-fill,.ww30-bar span{transition:width .55s var(--ease-flork)}

/* Give every Flork a dedicated, non-overlapping visual box. */
.feedback,.task-feedback,.flork-callout,.rw5-complete-grid,.ww28-complete,.ww30-complete,.exam-result-grid{min-width:0;overflow:visible!important}
.feedback{grid-template-columns:minmax(0,1fr) 88px!important;gap:14px!important}
.feedback>*,.flork-callout>*,.rw5-complete-grid>*,.ww30-complete>*,.exam-result-grid>*{min-width:0}
.feedback img,.task-feedback img,.flork-callout img,.rw5-complete-grid img,.ww28-complete img,.ww29-side-card img,.ww30-complete img,.exam-result-grid img,.ww31-task-head img,.ww28-stage-head img,.ww29-task-head img,.page-hero-box img,.aside-flork,.mini-flork{object-fit:contain!important;object-position:center!important;max-width:100%!important;flex:none}
.feedback img,.task-feedback img{width:82px!important;height:82px!important;max-height:82px!important;margin:auto!important}
.flork-callout img{width:104px!important;height:104px!important;max-height:104px!important}
.exam-result-grid img{width:118px!important;height:118px!important;max-height:118px!important;align-self:center!important}
.feature-card{padding-right:118px!important;min-height:190px}
.feature-card .mini-flork{right:14px!important;bottom:12px!important;width:86px!important;height:110px!important;position:absolute!important;object-fit:contain!important;z-index:1}
.feature-card>*:not(.mini-flork){position:relative;z-index:2}
.page-hero-box{overflow:visible!important}
.page-hero-box img{max-height:220px!important;align-self:center!important}
[class*="flork"]{box-sizing:border-box}
img[class*="flork"],[class*="flork"] img{background:transparent!important}

/* Motivation strip */
.flork-boost33{display:grid;grid-template-columns:74px minmax(0,1fr) auto;gap:16px;align-items:center;margin:16px auto 0;padding:12px 16px;background:linear-gradient(135deg,#fffdf9,#f2ece3);border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 22px rgba(66,53,41,.06);max-width:var(--max);width:min(100% - 32px,var(--max));overflow:visible}
.flork-boost33 img{width:70px;height:70px;object-fit:contain;mix-blend-mode:multiply;flex:none}
.flork-boost33 .copy{min-width:0}.flork-boost33 strong{display:block;font-family:Georgia,'Times New Roman',serif;font-size:1.12rem;line-height:1.08;color:#332d28}.flork-boost33 span{display:block;color:var(--muted);font-size:.86rem;margin-top:4px}.flork-boost33 .spark{font-size:1.25rem;color:var(--terracotta);opacity:.8}
.flork-punchline33{margin-top:6px;font-weight:850;font-size:.9rem;letter-spacing:.01em;color:currentColor;opacity:.92}
.exam-result-grade+.flork-punchline33{margin-top:10px;font-size:1rem}

/* Guardrails against collisions / off-screen content */
.card,.content-section,.task-card,.rw5-text-card,.rw5-ask-card,.ww31-panel,.ww29-panel,.world-option,.material-card,.page-hero-box,.hero-grid>*,.grid>*,.topic-layout>*,.rw5-reader-grid>*,.ww31-process>*,.ww29-process-grid>*{min-width:0;max-width:100%}
.card h1,.card h2,.card h3,.world-option strong,.world-option span,.world-option em,.page-hero-box h1,.page-hero-box h2,.page-hero-box p{overflow-wrap:anywhere}
input,textarea,select,button{max-width:100%;box-sizing:border-box}
.world-menu{overscroll-behavior:contain}
.world-option{grid-template-columns:minmax(72px,82px) minmax(0,1fr) auto!important}
.task-top{min-width:0}.task-title{min-width:0;overflow-wrap:anywhere}
.option,.q-item,.task-instruction{overflow-wrap:anywhere}

@media(max-width:760px){
 .feature-card{padding-right:90px!important}.feature-card .mini-flork{width:68px!important;height:90px!important}
 .feedback{grid-template-columns:minmax(0,1fr) 70px!important}.feedback img,.task-feedback img{width:66px!important;height:66px!important;max-height:66px!important}
 .flork-callout{grid-template-columns:minmax(0,1fr) 78px!important}.flork-callout img{width:76px!important;height:76px!important;max-height:76px!important}
 .flork-boost33{grid-template-columns:58px minmax(0,1fr);gap:12px;width:min(100% - 22px,var(--max));padding:10px 12px}.flork-boost33 img{width:56px;height:56px}.flork-boost33 .spark{display:none}
 .world-option{grid-template-columns:62px minmax(0,1fr)!important}.world-option em{grid-column:2}
 .exam-result-grid{grid-template-columns:1fr!important}.exam-result-grid img{justify-self:center!important}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
