.fraction-play{padding:20px;display:flex;flex-direction:column;gap:18px}.fraction-mission{display:flex;align-items:center;gap:24px;padding:18px 22px;border:1px solid #d4c9ea;border-radius:18px;background:linear-gradient(120deg,#eeeafa,#f3fbfc)}.fraction-mission h2{font:900 25px/1.2 Nunito,sans-serif;margin:5px 0}.fraction-mission p{font-size:18px;color:#626674;margin:6px 0}.fraction-mission small{font-weight:800;color:#7964aa}.fraction-target{background:white;border-radius:16px;min-width:94px;text-align:center;padding:10px;font:900 30px Nunito,sans-serif}.fraction{display:inline-flex;flex-direction:column;text-align:center;vertical-align:middle;line-height:1.1}.fraction>span:first-child{border-bottom:2px solid;padding:0 7px 3px}.fraction>span:last-child{padding-top:3px}.build-steps{display:flex;gap:10px;justify-content:center}.build-steps>span{padding:8px 16px;border-radius:10px;background:#f3f2f3;color:#76727f;font-weight:700}.build-steps .active{background:#e6dff6;color:#5c468a}.build-steps .done{background:#dcf1e5;color:#397255}.fraction-board{padding:35px 24px;background:#fff;border:1px solid #e4dfe8;border-radius:18px;min-height:250px;display:flex;flex-direction:column;justify-content:center;gap:25px}.interval-line{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.interval-line button{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#f8f6fc;border:2px solid #d5c9e8;border-radius:14px;min-height:90px;padding:14px;font:900 24px Nunito,sans-serif;cursor:pointer}.interval-line i{height:3px;background:#9684b4;flex:1;min-width:5px}.interval-line button:hover{background:#e8dff8;border-color:#9684b4}.unit-label{text-align:center;color:#626674;font-size:18px;margin-bottom:12px}.unit-line{display:grid;position:relative;margin:0 26px;isolation:isolate}.unit-line:before{content:'';position:absolute;top:26px;left:calc(50% / var(--point-count));right:calc(50% / var(--point-count));height:3px;background:#697180;z-index:-1}.unit-point{position:relative;background:transparent;border:0;height:105px;display:flex;align-items:center;flex-direction:column;gap:14px;font:900 25px Nunito,sans-serif;cursor:pointer;padding:13px 0 0;color:#343644}.unit-point i{width:27px;height:27px;background:#fff;border:3px solid #9684b4;border-radius:50%;flex:none}.unit-point:disabled{cursor:default;opacity:1}.unit-point:not(:disabled):hover i{background:#e0d4f2}.unit-point.placed i{background:#a5d8b7;border-color:#438963}.unit-point .fraction{font-size:22px;background:#edf9f1;padding:4px 9px;border-radius:8px}#partitionChoices{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}#partitionChoices:empty{display:none}#partitionChoices button{background:#f1edf8;border:2px solid #d5c9e8;border-radius:12px;padding:13px 20px;min-height:52px;font:800 20px "Source Sans 3",sans-serif;cursor:pointer}#partitionChoices button:hover{background:#e2d9f4}.fraction-shell .bottom-bar{margin:0}.fraction-shell .feedback{margin:0;font-size:18px}.fraction-shell #nextBtn[hidden]{display:none}.fraction-shell .layer{z-index:20}.fraction-shell .progress{flex:none}
html.fraction-screen-open,html.fraction-screen-open body{overflow:hidden;overscroll-behavior:none}.game-shell.fraction-fullscreen{position:fixed;inset:0;width:100%;height:100dvh;z-index:1000;border:0;border-radius:0;overflow:hidden;display:flex;flex-direction:column;background:#fffdf9}.fraction-fullscreen .fraction-play{min-height:0;flex:1;padding:14px;gap:12px}.fraction-fullscreen .fraction-board{flex:1;min-height:0}.fraction-fullscreen .fraction-mission h2{font-size:28px}.fraction-fullscreen .fraction-mission p,.fraction-fullscreen .feedback{font-size:22px}.fraction-fullscreen .tools button{font-size:20px}.fraction-fullscreen .stats strong{font-size:22px}.fraction-fullscreen .unit-point{font-size:30px}.fraction-fullscreen .layer{overflow:auto}
@media(max-width:700px){.fraction-mission{padding:12px;gap:12px}.fraction-mission h2{font-size:21px}.fraction-target{min-width:66px;font-size:24px}.interval-line{grid-template-columns:repeat(3,minmax(0,1fr))}.interval-line button{min-height:64px;padding:8px;font-size:22px}.fraction-board{padding:18px 10px}.build-steps{gap:4px}.build-steps>span{padding:7px;font-size:13px}.fraction-fullscreen .fraction-mission h2{font-size:21px}.fraction-fullscreen .fraction-mission p,.fraction-fullscreen .feedback{font-size:16px}.fraction-fullscreen .toolbar{padding:6px;flex-direction:row;gap:5px}.fraction-fullscreen .tools button{font-size:14px}.fraction-fullscreen .fraction-play{padding:8px;gap:8px}.fraction-fullscreen .fraction-target{min-width:56px}.fraction-fullscreen .fraction-board{padding:12px 8px}.unit-line{margin:0 4px}.unit-point{font-size:22px}.fraction-fullscreen .bottom-bar{gap:5px}.fraction-fullscreen .stats span{min-width:50px}.fraction-fullscreen #partitionChoices{gap:6px}.fraction-fullscreen #partitionChoices button{font-size:17px;padding:8px}.fraction-fullscreen .unit-label{font-size:16px}}
/* Select an interval on one continuous number line. */
.continuous-line{position:relative;margin:0 28px;padding:0 0 42px}.continuous-line:before{content:'';position:absolute;left:-16px;right:-16px;top:44px;height:3px;background:#657080}.continuous-line:after{content:'';position:absolute;right:-18px;top:39px;width:11px;height:11px;border-top:3px solid #657080;border-right:3px solid #657080;transform:rotate(45deg)}.integer-labels{position:absolute;inset:0;pointer-events:none}.integer-labels:before{content:'';position:absolute;left:-18px;top:39px;width:11px;height:11px;border-bottom:3px solid #657080;border-left:3px solid #657080;transform:rotate(45deg)}.integer-labels span{position:absolute;top:67px;transform:translateX(-50%);font:900 25px Nunito,sans-serif;white-space:nowrap}.integer-labels span:before{content:'';position:absolute;left:50%;top:-33px;height:22px;border-left:3px solid #657080}.continuous-line .interval-line{grid-template-columns:repeat(6,minmax(0,1fr));gap:0;position:relative}.continuous-line .interval-line button{display:block;min-height:88px;padding:0;border:0;border-radius:0;background:transparent;position:relative}.continuous-line .interval-line button:hover,.continuous-line .interval-line button:focus-visible{background:#dcd0f366;outline:2px solid #9c88bd;outline-offset:-3px;border-radius:9px}.continuous-line .interval-line button:active{background:#cbb9ec88}@media(max-width:700px){.continuous-line{margin:0 12px}.integer-labels span{font-size:19px}.continuous-line .interval-line button{min-height:88px}}
/* Keep the same axis and coordinates throughout all three steps. */
.fraction-board{position:relative}.fraction-board #intervalChoices{position:absolute;left:24px;right:24px;top:50%;transform:translateY(-50%)}.fraction-board #constructedLine{display:none}.fraction-board #partitionChoices{position:absolute;left:12px;right:12px;bottom:18px;min-height:52px}.continuous-line .interval-line button:disabled{opacity:1;cursor:default;background:transparent;outline:none}.continuous-line .interval-line button.chosen{background:linear-gradient(transparent 32px,#ede6f7 32px,#ede6f7 56px,transparent 56px);outline:none;border-radius:0}.subdivision-layer{position:absolute;left:0;right:0;top:0;height:88px;pointer-events:none}.subdivision-point{position:absolute;top:0;height:88px;transform:translateX(-50%);padding:0;border:0;background:transparent;color:#66518d;cursor:pointer;pointer-events:auto}.subdivision-point i{position:absolute;top:36px;left:50%;height:18px;border-left:2px solid #9580b5;transform:translateX(-50%)}.subdivision-point:hover i,.subdivision-point:focus-visible i{border-color:#67468b;border-width:4px}.subdivision-point>span{position:absolute;bottom:65px;left:50%;transform:translateX(-50%)}.subdivision-point.placed i{width:14px;height:14px;top:38px;background:#78bd91;border:2px solid #34724b;border-radius:50%}.subdivision-point .fraction{font:900 20px/1.1 Nunito,sans-serif;background:#e3f4e9;border-radius:9px;padding:5px 8px}.subdivision-point:disabled{cursor:default;opacity:1}@media(max-width:700px){.fraction-board #intervalChoices{left:10px;right:10px}.fraction-board #partitionChoices{bottom:12px}.subdivision-point .fraction{font-size:17px}}
.continuous-line:before,.continuous-line:after{z-index:2;pointer-events:none}.integer-labels{z-index:3}.subdivision-layer{z-index:4}

.fraction-target{display:flex;align-items:center;justify-content:center;gap:9px;flex-shrink:0}.mixed-number{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}.mixed-equals{font-size:.7em;color:#777080}.mixed-whole{line-height:1}.fraction-target .fraction{flex-shrink:0}@media(max-width:700px){.fraction-target{gap:5px;padding:8px;font-size:22px}.fraction-fullscreen .fraction-target{font-size:22px}.mixed-number{gap:2px}}