:root{--ink:#492743;--muted:#77526c;--pink:#ad245c;--paper:#fff8f3;--focus:#276b6b;font-family:'Avenir Next','Trebuchet MS',sans-serif;color:var(--ink);background:#fbeaf0;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 5% 25%,#ffe1c9 0,transparent 45%),radial-gradient(ellipse at 100% 90%,#e8dffa 0,transparent 50%);min-height:100vh}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:4px}button{color:inherit}a{color:inherit;text-underline-offset:4px}::selection{background:#f5b4cf;color:#492743}[hidden]{display:none!important}header,main{max-width:1220px;margin:auto}header{padding:26px 30px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dec1cc}.logo{text-decoration:none;font-size:23px;font-weight:850;letter-spacing:-.8px;display:flex;align-items:center;gap:10px}.logo-symbol{background:var(--pink);color:white;display:grid;place-items:center;width:34px;height:34px;border-radius:12px;transform:rotate(-10deg);font-size:30px}.logo-dot{height:7px;width:7px;background:#d24c70;border-radius:50%}.back{font-size:13px;font-weight:650}main{padding:30px}.headline{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.headline h1{font-size:clamp(35px,4.2vw,53px);letter-spacing:-1.8px;line-height:1.03;margin:0;font-weight:850}.headline h1 em{font-style:normal;color:var(--pink)}.headline p{margin:14px 0 0;font-size:15px;color:var(--muted)}.grade{width:76px;height:86px;border:2px solid #d7a8be;border-radius:40% 40% 45% 45%;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:35px;line-height:1.1;font-weight:800;transform:rotate(8deg);margin-right:20px}.grade span{font-size:14px;font-weight:600}.game-layout{display:grid;grid-template-columns:minmax(0,1.24fr) minmax(300px,.85fr);gap:42px;align-items:start}.play-area{background:#f7d7e5;border-radius:28px;padding:23px;box-shadow:0 16px 40px #793b6310}.stats{display:flex;justify-content:space-between;text-align:center;padding:0 10px 19px;gap:12px}.stats span{display:block;font-size:12px;color:#744563;font-weight:650}.stats strong{display:block;font-size:29px;font-variant-numeric:tabular-nums;line-height:1.4}.stats .timer-block strong{color:#a62557}.board-wrap{position:relative}.board{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;padding:13px;background:#be8cae;border-radius:20px;box-shadow:inset 0 3px 10px #592e4824;aspect-ratio:1}.cell{min-width:0;padding:9px;border:0;border-radius:12px;background:#efd5e7;display:grid;place-items:center;position:relative;transition:background .15s,transform .15s}.cell:disabled{opacity:1}.cell:not(:disabled):hover{background:#fff3fa;transform:translateY(-2px)}.cell.selected{background:#fff9d9;outline:3px solid #7e3c74;outline-offset:-3px}.cell.hinted{background:#fffbd2;outline:3px dashed #7d465f;outline-offset:-3px}.candy{display:block;width:100%;height:100%;max-width:52px;aspect-ratio:1;filter:drop-shadow(0 4px 2px #65354738)}.cell.pop .candy{animation:pop .42s ease-in forwards}.cell.drop .candy{animation:drop .35s cubic-bezier(.16,1,.3,1)}@keyframes pop{40%{transform:scale(1.2) rotate(12deg)}100%{transform:scale(0);opacity:0}}@keyframes drop{from{transform:translateY(-22px);opacity:.2}to{transform:translateY(0);opacity:1}}.burst{position:absolute;top:42%;left:10%;right:10%;text-align:center;font-size:29px;font-weight:850;color:#6a2050;background:#fff9e8;border-radius:16px;padding:16px;pointer-events:none;box-shadow:0 7px 20px #5c26532b}.burst:empty{display:none}.board-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;font-size:12px}.text-button{background:none;border:0;padding:9px 0;text-decoration:underline;text-underline-offset:4px;font-size:13px;font-weight:700;white-space:nowrap}.journey{padding-top:8px}.journey-label{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:13px}.journey-label span{font-size:12px}progress{appearance:none;width:100%;height:10px;border:0;border-radius:10px;overflow:hidden;margin:12px 0 7px;background:#e5b7cf}progress::-webkit-progress-bar{background:#e5b7cf}progress::-webkit-progress-value{background:#ac306a;border-radius:10px}progress::-moz-progress-bar{background:#ac306a}.destinations{display:flex;justify-content:space-between;font-size:10px;color:#754e69;gap:10px}.destinations .current{font-weight:800;color:#a62557}.controls{padding-top:4px}h2{font-size:27px;letter-spacing:-.7px;margin:0 0 9px}p{line-height:1.55}.secondary{color:var(--muted);font-size:14px;margin-top:0;margin-bottom:22px}label,legend{display:block;font-size:13px;font-weight:700;margin:16px 0 7px}select,input[type=text]{width:100%;border:1px solid #d9b8ca;background:var(--paper);border-radius:10px;color:var(--ink);padding:13px 14px;caret-color:var(--pink)}select{font-size:14px}fieldset{border:0;padding:0;margin:20px 0}legend{margin:0 0 9px}.tempos{display:flex;gap:7px}.tempos label{position:relative;flex:1;margin:0;cursor:pointer}.tempos input{position:absolute;opacity:0}.tempos span{display:block;border:1px solid #d4adc1;border-radius:10px;padding:11px 5px;text-align:center}.tempos b{font-size:13px}.tempos small{display:block;font-size:11px;font-weight:500;margin-top:4px}.tempos input:checked+span{background:#f4c8dc;border-color:#a3265d}.tempos input:focus-visible+span{outline:3px solid var(--focus);outline-offset:3px}.primary{border:0;border-radius:12px;background:var(--pink);color:#fff;padding:15px 20px;font-weight:750;font-size:16px;width:100%;box-shadow:0 5px 12px #aa245c20;display:flex;justify-content:space-between;align-items:center}.primary:hover{background:#92204f}.record{font-size:11px;text-align:center;color:var(--muted);margin:13px 0 0}.howto{border-top:1px solid #dcbccb;margin-top:25px;padding-top:19px}.howto h3{font-size:14px;margin:0 0 12px}.howto ol{padding-left:19px;margin:0;color:var(--muted);font-size:12px;line-height:1.65}.howto li{padding-left:3px;margin-bottom:7px}.howto b{color:var(--ink)}footer{display:flex;justify-content:space-between;gap:20px;font-size:11px;color:var(--muted);margin-top:27px;padding-bottom:10px}.task-heading{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-bottom:20px}.equation{font-size:clamp(34px,4vw,49px);font-weight:800;letter-spacing:-1px;margin:25px 0;font-variant-numeric:tabular-nums}.answer-row{display:flex;gap:10px}.answer-row input{width:45%;font-size:26px}.answer-row button{width:55%;justify-content:center}.help-button{background:transparent;border:1px solid #d5adc1;padding:13px;border-radius:10px;width:100%;margin-top:15px;font-size:13px;font-weight:650}.help-button:hover{background:#f6d9e5}.feedback{font-size:14px;color:#933956;font-weight:600}.feedback:empty{display:none}#tutor{background:#fff5dd;padding:16px;border-radius:12px;margin-top:18px;font-size:14px}#tutor h3{font-size:16px;margin:0 0 12px}#tutor ol{padding-left:22px;line-height:1.6}#tutor li+li{margin-top:7px}#tutor p{font-size:12px;color:#71583f}.end-button{margin-top:25px;font-size:12px;color:var(--muted)}#paused{padding:10px 0 20px}#paused h3{font-size:24px}.result-stars{font-size:34px;letter-spacing:8px;color:#a86a16;margin:8px 0 20px}#results h2{font-size:35px}#resultStats{display:grid;grid-template-columns:1fr auto;gap:14px;margin:24px 0;padding:22px 0;border-block:1px solid #ddbdcb}dt{font-size:14px}dd{margin:0;font-weight:800;font-size:20px}.urgent{color:#bc153b!important}body.is-paused .board{visibility:hidden}
@media(min-width:1050px){.headline h1 br{display:none}.headline h1 em{margin-left:9px}}
@media(max-width:780px){header{padding:18px 20px}.logo{font-size:19px}.back{font-size:11px}main{padding:23px 18px}.headline{margin-bottom:25px}.headline p{font-size:13px;max-width:240px}.grade{margin-right:0;width:61px;height:73px}.game-layout{grid-template-columns:1fr;gap:25px;max-width:520px;margin:auto}.play-area{padding:16px}.controls{padding:0 5px}.cell{padding:7px}.board{gap:6px;padding:10px}.headline{max-width:520px;margin-inline:auto}.howto{margin-top:23px}footer{flex-direction:column;gap:7px;text-align:center}.stats{padding-bottom:12px}.stats strong{font-size:25px}.journey-label{font-size:12px}.board-caption{font-size:11px}.headline h1{font-size:38px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@font-face{font-family:SweetDisplay;src:url('/candy-display.ttf') format('truetype');font-style:normal;font-weight:800;font-display:swap}.headline h1,.logo,h2,.grade{font-family:SweetDisplay,'Avenir Next',sans-serif;font-weight:800}.headline h1{letter-spacing:-1px}.logo{letter-spacing:-.4px}
@media(max-width:780px){.game-layout{display:flex;flex-direction:column}.controls{display:contents}.play-area,#setup,#task,#results,.howto{width:100%}#setup{order:-1}.howto{order:3}body.playing .headline,body.playing .howto{display:none}body.playing main{padding-top:16px}body.playing #task{padding:0 4px}body.playing .task-heading{margin-bottom:8px}body.playing #taskIntro{font-size:12px;margin-bottom:10px}body.playing .equation{margin:12px 0}body.playing #taskTitle{font-size:23px}}

/* Keep the current calculation on the board on small screens. The same form
   moves back to the side panel on desktop, preserving its answer and tutor. */
@media(max-width:780px){
 body.playing #task.board-task{position:absolute;inset:0;z-index:2;width:auto;padding:14px 16px;background:var(--paper);border-radius:20px;overflow:auto;overscroll-behavior:contain;scrollbar-color:#bd7297 var(--paper);scrollbar-width:thin;box-shadow:0 8px 22px #65354724}
 .board-task .task-heading{margin-bottom:0}
 .board-task .task-heading .text-button{min-height:44px;padding:8px 0}
 body.playing .board-task #taskTitle{font-size:19px;margin:0}
 body.playing .board-task #taskIntro{display:none}
 body.playing .board-task .equation{font-size:36px;line-height:1.15;margin:8px 0 10px}
 .board-task #answerForm>label{margin:0 0 5px}
 .board-task .answer-row input{padding:8px 12px;min-height:48px}
 .board-task .answer-row .primary{padding:10px 12px;min-height:48px}
 .board-task .help-button{margin-top:10px;min-height:44px;padding:10px 8px}
 .board-task .end-button{margin-top:8px;min-height:44px}
 .board-task #tutor{margin-top:12px;padding:12px}
 .board-task #tutor ol{margin-block:8px}
 .board-task .feedback{margin:10px 0}
}