/* Scoped Arrow Flow layout; the shared kit owns results, scores and sound. */
.neu-arrow-flow{display:block;gap:0;text-align:left;container-type:size;padding:12px;overflow:hidden}
.neu-arrow-flow .af-shell{height:100%;width:100%;display:grid;grid-template-rows:40px 48px minmax(64px,1fr) 20px 138px;gap:8px;max-width:760px;margin:auto}
.af-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.af-hud{display:flex;gap:28px}.af-hud>div{display:flex;flex-direction:column;align-items:center;line-height:1.25}.af-hud span{font-size:10px;letter-spacing:1px;font-weight:700;color:#526b8e;text-transform:uppercase}.af-hud strong{font-size:25px;color:#062b63;font-variant-numeric:tabular-nums}.af-hud>div+div strong{color:#0878e8}.af-tools{display:flex;gap:8px}
.af-tools button{font-family:inherit;font-weight:700;font-size:19px;width:44px;height:44px;border:1px solid #d8e7f4;border-radius:50%;background:#fff;color:#062b63;cursor:pointer;touch-action:manipulation}.af-tools button:disabled{opacity:.45;cursor:default}
.af-rule{display:flex;align-items:center;gap:10px;background:#eaf5ff;border:1px solid #cee5ff;border-radius:13px;padding:6px 12px}.af-rule>i{width:11px;height:11px;border-radius:3px;background:#0878e8;flex-shrink:0}.af-rule div>span{font-size:9px;letter-spacing:1.3px;font-weight:800;color:#0666c5;display:block}.af-rule strong{font-size:clamp(12px,3.3cqw,18px);line-height:1.4;display:block}.af-rule>b{margin-left:auto;color:#0878e8;font-size:27px}.af-rule.af-is-point{background:#fff0f2;border-color:#fbd0d5}.af-is-point>i{background:#f15f6d}.af-is-point div>span,.af-is-point>b{color:#b73148}
.af-field{width:100%;height:100%;position:relative;overflow:hidden;border:1px solid #d8e7f4;border-radius:16px;background:radial-gradient(circle,#062b6316 1px,transparent 1px) 0 0/24px 24px,#f6fbff;touch-action:none;user-select:none}.af-arrow{position:absolute;left:0;top:0;width:45px;height:45px;will-change:transform}.af-arrow svg{height:100%;width:100%;display:block}.af-track{position:absolute;left:0;right:0;bottom:0;height:4px;background:#e9f1f9}.af-track i{display:block;width:100%;height:100%;background:#0878e8;transform-origin:left}.af-feedback{padding:0!important;margin:0!important;height:20px;text-align:center;font-size:11px!important;font-weight:600;color:#526b8e}.af-feedback.af-correct{color:#087c65}.af-feedback.af-wrong{color:#ba3046}
.af-bottom{display:flex;align-items:center;justify-content:center;gap:22px}.af-controls{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);gap:3px;flex-shrink:0}.af-controls button{border:1px solid #cee0f0;border-radius:11px;background:#fff;color:#062b63;font-family:inherit;font-size:27px;line-height:1;box-shadow:0 2px 0 #e9f1f9;cursor:pointer;touch-action:manipulation}.af-controls button:hover{background:#eff8ff;border-color:#0878e8}.af-controls button:active{transform:translateY(1px)}.af-controls [data-af-direction=up]{grid-area:1/2}.af-controls [data-af-direction=left]{grid-area:2/1}.af-controls [data-af-direction=right]{grid-area:2/3}.af-controls [data-af-direction=down]{grid-area:3/2}.af-controls i{grid-area:2/2;place-self:center;font-style:normal;color:#9ab7d3}.af-control-copy{font-size:11px;line-height:1.6}.af-control-copy strong{font-size:11px}.af-control-copy p{font-size:10px!important;line-height:1.7;margin:6px 0!important;color:#526b8e}.af-control-copy>span{display:block;font-size:9px;color:#526b8e}.af-control-copy i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}.af-blue{background:#0878e8}.af-red{background:#f15f6d}
.neu-arrow-flow button:focus-visible,.af-field:focus-visible{outline:3px solid #0878e8;outline-offset:2px}
.af-modal{border:1px solid #d8e7f4;border-radius:23px;padding:0;max-width:450px;width:calc(100% - 28px);max-height:calc(100dvh - 28px);color:#062b63;background:#fff;text-align:left;box-shadow:0 25px 100px #041f4c40;font-family:inherit}.af-modal::backdrop{background:#041f4c91;backdrop-filter:blur(4px)}.af-modal>div{padding:24px}.af-modal h2{font-size:27px;line-height:1.2;letter-spacing:-.8px;margin:6px 0 12px}.af-modal p{font-size:12px;line-height:1.6;color:#526b8e;margin:12px 0}.af-eyebrow{font-size:9px;font-weight:800;letter-spacing:1.6px;color:#526b8e}.af-lesson{padding:12px;border:1px solid #cee5ff;border-radius:13px;background:#eff8ff;margin:10px 0;display:flex;align-items:center;gap:12px}.af-lesson>b{font-size:36px;color:#0878e8;line-height:1}.af-lesson strong{font-size:12px;display:block}.af-lesson p{margin:3px 0 0;font-size:11px}.af-lesson-red{background:#fff0f2;border-color:#fbd0d5}.af-lesson-red>b{color:#f15f6d}.af-tip{padding:9px 11px;border-left:3px solid #ffc835;background:#fffcf1}.af-primary,.af-secondary{width:100%;border:0;border-radius:12px;min-height:48px;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer;padding:12px}.af-primary{background:#0878e8;color:#fff;margin-top:8px}.af-secondary{margin-top:10px;background:#eff8ff;color:#062b63}
.play-frame--arrow-flow .play-frame__screen{aspect-ratio:auto;height:640px}.play-frame--arrow-flow .play-ready__art{width:min(60%,300px);height:auto;border-radius:16px;margin-bottom:14px}
@container(max-width:330px){.af-bottom{gap:10px}.af-control-copy strong{font-size:10px}.af-control-copy p{font-size:9px!important}.af-hud{gap:20px}}
@container(max-height:380px){.neu-arrow-flow .af-shell{grid-template-rows:34px 43px minmax(65px,1fr) 18px 92px;gap:5px}.af-hud strong{font-size:22px}.af-controls{grid-template-rows:repeat(2,44px)}.af-controls [data-af-direction=down]{grid-area:2/2}.af-controls i{display:none}.af-control-copy p{margin:3px 0!important}.af-rule strong{font-size:13px}.af-tools button{height:34px;width:44px;font-size:16px}}
@container(max-height:260px){.neu-arrow-flow .af-shell{grid-template-columns:minmax(190px,.95fr) minmax(100px,1fr);grid-template-rows:35px 43px minmax(92px,1fr);gap:5px 12px}.af-top,.af-rule,.af-bottom{grid-column:1}.af-top{grid-row:1}.af-rule{grid-row:2}.af-bottom{grid-row:3;justify-content:start;gap:8px}.af-control-copy{display:none}.af-field{grid-column:2;grid-row:1/4;height:calc(100% - 22px)}.af-feedback{grid-column:2;grid-row:3;align-self:end}.af-hud{gap:18px}.af-tools{gap:5px}.af-rule>b{display:none}}
@media(max-width:500px){.play-frame--arrow-flow .play-frame__screen{height:560px}.af-modal>div{padding:20px}}
@media(orientation:landscape) and (max-height:500px){[data-game-mount]:has(> .neu-audio-controls) > .neu-arrow-flow{padding-top:8px;padding-bottom:8px}}

/* Use the available fullscreen width instead of the site's 4:3 game limit. */
.play-frame--arrow-flow:fullscreen .play-frame__screen{width:100%;height:100%;max-height:100%;min-height:0;aspect-ratio:auto}