@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;font-family:'DM Sans',sans-serif;color:#ecf0ea;background:#0b1225}*{box-sizing:border-box}body{margin:0;overflow:hidden;min-height:100dvh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:1px solid #ffffff24;border-radius:12px;background:#ffffff05;padding:15px 20px;touch-action:manipulation}button:hover{background:#ffffff10}button:focus-visible,a:focus-visible{outline:2px solid #b4e3be;outline-offset:4px}button:disabled{opacity:.35;cursor:default}[hidden]{display:none!important}canvas,#danger{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}#danger{background:radial-gradient(ellipse,transparent 15%,#b00019 100%);opacity:0;z-index:2}header,footer{position:fixed;left:5%;right:5%;display:flex;align-items:center;justify-content:space-between;z-index:5}header{top:28px}.brand{font-size:12px;letter-spacing:2px;font-weight:700;text-decoration:none;color:inherit}.brand span{color:#87a18f;margin:0 10px}.tools{display:flex;gap:10px}.tools button{font-size:11px;padding:10px 14px}footer{bottom:24px;color:#84909f;font-size:9px;letter-spacing:2px}.panel{position:absolute;top:50%;left:11%;transform:translateY(-48%);width:min(440px,80%);z-index:4}.eyebrow{font-size:10px;letter-spacing:3px;color:#a8cdb3}h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(72px,10vw,126px);line-height:.87;letter-spacing:-8px;margin:28px 0 22px}h1 em{font-style:normal;color:#bbd8b9}.intro{color:#b0bac5;line-height:1.5;font-size:19px}.legend{display:flex;gap:20px;margin:27px 0}.legend span{font-size:10px;color:#aab4c2;text-align:center}.legend i{display:flex;width:37px;height:37px;border-radius:50%;align-items:center;justify-content:center;margin-bottom:9px;font-style:normal;font-size:13px;font-weight:bold;color:#172033}.white{background:#f2efdf}.red{background:#f58992}.gold{background:#eac47b}.blue{background:#98c7f1}.choices{display:grid;gap:8px}.choices button{text-align:left;display:flex;justify-content:space-between;align-items:center;font-size:13px}.choices button span{font-size:10px;opacity:.65}.primary{background:#bfdabc;color:#162b24;border-color:#bfdabc;font-weight:700}.primary:hover{background:#d1e8ce}.hint{font-size:11px;line-height:1.8;color:#8e9dad;margin-top:21px}#best{font-size:11px;color:#adc9ad}#play{position:absolute;inset:100px 5% 50px}.hud{display:flex;justify-content:space-between;gap:20px}.hud label,.counter label{display:block;font-size:9px;letter-spacing:2px;color:#a8b7c2;margin-bottom:10px}.hud strong{font-family:'Space Grotesk',sans-serif;font-size:25px;font-weight:400}.right{text-align:right}.sleep{width:min(32%,240px);text-align:center}.countline{position:absolute;left:50%;top:23%;height:38%;border-left:1px dashed #c7dbc147}.countline span{position:absolute;top:-22px;width:120px;left:-60px;text-align:center;font-size:8px;letter-spacing:2px;color:#c7dbc190}.counter{position:absolute;top:62%;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none}.counter label{margin:0}#count{font-size:clamp(65px,10vw,110px);font-family:'Space Grotesk',sans-serif;letter-spacing:-5px;line-height:1.2}#feedback{font-size:11px;color:#acb9c5;white-space:nowrap}.tapzones{position:absolute;inset:100px 0 15px;display:flex}.tapzones button{width:50%;border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:25px;gap:8px}.tapzones button:active{background:#ffffff05}.tapzones b{font-size:35px;font-weight:400;color:#bfdabc}.tapzones span{font-size:9px;letter-spacing:2px;color:#738697}#operation{position:absolute;top:19%;left:50%;transform:translateX(-50%);font-size:17px;color:#cfe4c9;transition:opacity .2s;pointer-events:none}h2{font-family:'Space Grotesk',sans-serif;font-size:58px;line-height:1.05;letter-spacing:-3px;margin:25px 0}.panel>p{color:#aab8c7;line-height:1.8}.panel>button{margin:10px 8px 0 0}#stars{color:#eac47b;font-size:34px;letter-spacing:10px}@media(max-width:600px){header{top:20px}.brand{font-size:9px;letter-spacing:1px}.brand span{margin:0 4px}.tools{gap:5px}.tools button{padding:8px}.panel{left:9%;width:82%}h1{font-size:84px;letter-spacing:-6px;margin-top:24px}.intro{font-size:16px}.legend{margin:20px 0}.hint{margin-top:15px}.hud strong{font-size:21px}#play{top:90px}.counter{top:61%}footer{font-size:7px}.tapzones button{padding:30px 0}h2{font-size:48px}}@media(max-height:720px){h1{font-size:72px;margin:18px 0}.intro{font-size:15px;margin:12px 0}.legend{margin:15px 0}.hint{margin:12px 0}.panel{transform:translateY(-45%)}.choices button{padding:12px 16px}}
/* The launch space stays clear; the sleeping wolf anchors the bottom edge. */
#play .countline{top:19%;height:0;border:0;pointer-events:none}
#operation{top:47%;font-family:'Space Grotesk',sans-serif;font-size:23px;font-weight:600;pointer-events:none}
#pace{position:absolute;top:10%;width:100%;text-align:center;font-size:8px;letter-spacing:3px;color:#91a995;pointer-events:none}
.counter{top:59%}#count{transform-origin:center;will-change:transform}
.tapzones{inset:0 0 15px}.tapzones button{justify-content:flex-end;padding-bottom:25px}
#minus{background:linear-gradient(90deg,rgba(191,218,188,var(--tap-left,0)),transparent)}
#plus{background:linear-gradient(270deg,rgba(191,218,188,var(--tap-right,0)),transparent)}
#danger{background:radial-gradient(ellipse,transparent 25%,#b00019 100%)}
#menu .choices,#menu .legend,#menu .hint{position:relative;z-index:1}
@media(max-width:600px){.counter{top:56%}.tapzones button{padding-bottom:32px}.tapzones b{font-size:38px}#operation{top:46%}#pace{top:10%}}
@media(prefers-reduced-motion:reduce){#count{transform:none!important}}
/* Touch-first play: both halves respond immediately, all the way to the edges. */
html,body{width:100%;height:100%;overscroll-behavior:none}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{min-height:44px}header{top:max(18px,env(safe-area-inset-top));left:max(5%,env(safe-area-inset-left));right:max(5%,env(safe-area-inset-right))}
.tools button{min-width:58px;min-height:44px}footer{bottom:max(18px,env(safe-area-inset-bottom))}
#play{position:fixed;inset:0}
.hud{position:absolute;top:calc(88px + env(safe-area-inset-top));left:6%;right:6%;pointer-events:none}
#play .countline{top:29%}#pace{top:21%}#operation{top:51%}
.counter{top:60%}.tapzones{inset:0}.tapzones button{border-radius:0;padding-bottom:calc(8dvh + env(safe-area-inset-bottom));touch-action:none}
.tapzones b{display:grid;place-items:center;width:64px;height:64px;border:1px solid #bfdabc30;border-radius:22px;background:#bfdabc0a;box-shadow:inset 0 1px #ffffff08;font-size:42px;line-height:1}
.tapzones span{color:#9fb2bd;font-size:10px;letter-spacing:1.5px}

#count{font-variant-numeric:tabular-nums;line-height:1.05;text-shadow:0 4px 30px #00000022}
#feedback{display:block;margin-top:12px}
@media(max-width:600px){
  header{left:max(6%,env(safe-area-inset-left));right:max(6%,env(safe-area-inset-right));gap:10px}
  .brand{font-size:9px;letter-spacing:.8px;white-space:nowrap}.brand span{margin:0 3px}.tools{gap:6px}.tools button{font-size:12px;padding:8px 10px;min-width:54px;border-radius:14px}
  .panel{left:7%;width:86%;max-height:calc(100dvh - 120px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain;padding-bottom:4px}
  #menu{top:calc(100px + env(safe-area-inset-top));transform:none;max-height:calc(100dvh - 145px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
  h1{display:flex;gap:9px;align-items:baseline;font-size:clamp(42px,13vw,68px);letter-spacing:-3.5px;line-height:1;margin:20px 0 14px}h1 br{display:none}
  .eyebrow{font-size:8px;letter-spacing:2.2px}.intro{font-size:17px;line-height:1.5;margin:0 0 24px}.legend{gap:0;justify-content:space-between;max-width:280px;margin:20px 0 26px}.legend i{width:43px;height:43px;font-size:16px;box-shadow:0 4px 12px #00000015}.legend span{font-size:11px}
  .choices{gap:10px}.choices button{min-height:57px;padding:16px 18px;border-radius:16px;font-size:14px;background-color:#ffffff08;backdrop-filter:blur(8px)}.choices .primary{background:#bfdabc}.choices button span{font-size:10px}
  .hint{font-size:11px;line-height:1.7;margin:20px 0 0;max-width:270px}#best{margin-top:12px}
  .hud{top:calc(88px + env(safe-area-inset-top))}.hud label{font-size:8px;letter-spacing:1.6px}.hud strong{font-size:25px}.sleep{width:40%}
  #pace{top:21%;font-size:8px;letter-spacing:2px}#operation{top:52%;font-size:25px}
  .counter{top:62%}#count{font-size:clamp(76px,23vw,110px);letter-spacing:-4px}.counter label{font-size:9px;letter-spacing:2.5px}#feedback{font-size:11px;margin-top:8px}
  .tapzones button{padding-bottom:calc(9dvh + env(safe-area-inset-bottom));gap:10px}.tapzones b{width:68px;height:62px;border-radius:21px}.tapzones span{font-size:9px}
  h2{font-size:48px;letter-spacing:-2.5px}.panel>button{min-height:52px;border-radius:16px}
  footer{font-size:7px;letter-spacing:1.3px;left:7%;right:7%}
}
@media(max-width:600px) and (max-height:740px){
  #menu{top:82px;max-height:calc(100dvh - 120px)}h1{margin:14px 0 10px}.intro{font-size:15px;margin-bottom:14px}.legend{margin:15px 0 18px}.legend i{width:36px;height:36px;font-size:14px}
  .choices{gap:8px}.choices button{min-height:50px;padding:13px 16px}.hint{margin-top:14px}.counter{top:60%}#count{font-size:76px}.hud{top:82px}.tapzones button{padding-bottom:8dvh}.tapzones b{height:54px;width:62px}
}
@media(max-height:500px) and (max-width:1000px){
  #menu{top:80px;left:6%;width:48%;max-height:calc(100dvh - 100px);transform:none;overflow-y:auto;scrollbar-width:none}
  h1{display:flex;gap:8px;font-size:48px;line-height:1;letter-spacing:-3px;margin:12px 0}h1 br{display:none}.intro{font-size:14px;margin:10px 0}.legend{margin:12px 0}.choices button{min-height:44px;padding:10px 14px}.hint{font-size:10px;margin-top:12px}
  .hud{top:70px}.hud label{font-size:8px}.hud strong{font-size:20px}#pace{top:35%;left:6%;text-align:left;width:auto}#play .countline{top:29%}.counter{top:58%}#count{font-size:58px}.counter label{font-size:8px}#feedback{font-size:9px;margin-top:3px}
  .tapzones button{padding-bottom:max(35px,env(safe-area-inset-bottom));gap:5px}.tapzones b{width:55px;height:48px;font-size:30px}.tapzones span{font-size:8px}
  #result,#paused{left:7%;top:54%;width:55%;max-height:calc(100dvh - 90px);overflow-y:auto}h2{font-size:36px;margin:14px 0}.panel>p{font-size:12px}.panel>button{min-height:44px;padding:10px 14px}
}

@media(max-height:500px) and (max-width:1000px){#operation{top:39%}}
/* A torn bedtime scorecard, with the fed wolf watching from the hillside. */
#result{background:linear-gradient(135deg,#172932f5,#10202af2);border:1px solid #c4d4b547;border-radius:34px 12px 36px 12px;padding:30px;box-shadow:0 22px 90px #0007;width:min(490px,86%)}
#result .eyebrow{color:#eda9a0}#result h2{font-size:clamp(32px,5vw,55px);margin:18px 0 22px;letter-spacing:-2px}#result #stars{font-size:48px;letter-spacing:-2px;color:#edcf91;font-variant-numeric:tabular-nums}.score-label{font-size:9px;letter-spacing:3px;color:#b2c7bd}.result-stats{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;border-top:1px dashed #a5bba544;border-bottom:1px dashed #a5bba544;padding:20px 0;margin-top:18px}.result-stats div{display:flex;flex-direction:column;gap:5px}.result-stats strong{font-size:25px;font-family:'Space Grotesk',sans-serif;color:#e1e6d4}.result-stats span{font-size:11px;color:#a4b5bc}#resultText{font-size:10px;line-height:1.6;margin:14px 0}#again{border-radius:18px 6px 18px 6px}#home{border:0;font-size:12px}
@media(max-width:600px){#result{left:7%;padding:22px;top:49%}#result h2{font-size:36px}#result #stars{font-size:40px}.result-stats{gap:15px;padding:15px 0}#result>button{margin-right:0;padding:12px 14px}#result .eyebrow{font-size:8px}}
@media(max-height:500px){#result{top:55%;padding:18px;max-height:calc(100dvh - 90px)}#result h2{margin:8px 0;font-size:30px}#result #stars{font-size:28px}.result-stats{grid-template-columns:repeat(4,1fr);gap:10px;padding:10px 0;margin-top:8px}.result-stats strong{font-size:19px}}
/* Keep restart/navigation together and reachable on compact phone scorecards. */
.result-actions{display:flex;gap:8px;margin-top:16px;background:#11232c;padding-top:8px}
.result-actions button{flex:1;min-width:0;min-height:48px;padding:12px 8px;font-size:12px;white-space:nowrap;margin:0!important}
@media(max-width:600px) and (max-height:740px){
  #result{top:calc(82px + env(safe-area-inset-top));transform:none;padding:16px;max-height:calc(100dvh - 112px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
  #result h2{font-size:26px;line-height:1.05;margin:8px 0 12px}#result #stars{font-size:32px;line-height:1.1}.score-label{font-size:8px}
  .result-stats{margin-top:12px;gap:10px;padding:12px 0}.result-stats div{gap:3px}.result-stats strong{font-size:19px}.result-stats span{font-size:9px}
  #resultText{font-size:9px;line-height:1.4;margin:8px 0}.result-actions{margin-top:10px;gap:6px;padding-top:6px}.result-actions button{font-size:10px;min-height:44px;padding:10px 5px}
}
@media(max-height:500px) and (min-width:601px){.result-actions{margin-top:8px;padding-top:4px}.result-actions button{min-height:44px;padding:8px}}
@media(max-height:500px) and (min-width:601px){
  #result{top:74px;transform:none;max-height:calc(100dvh - 86px);padding:14px}
  #result h2{font-size:28px;margin:6px 0}#result #stars{line-height:1.1}
  .result-stats{margin-top:6px;padding:8px 0}.result-stats div{gap:3px}
  #resultText{font-size:9px;line-height:1.35;margin:8px 0}
}

/* Let accuracy colors settle gently between taps and sheep entries. */
#count{transition:color .45s ease}

/* Keep the two counting controls readable against the dense moonlit flowers. */
.tapzones b{background:#142e31d9;border-color:#b9d6c26b;box-shadow:0 5px 22px #071d2633,inset 0 1px #dcebd819}
.tapzones span{background:#10242bd9;color:#d4e2d7;border-radius:8px;padding:4px 8px}
/* Stacked arithmetic fractions share a clear horizontal bar in menu and HUD. */
.fraction{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1;font-size:.75em;letter-spacing:0}
.fraction>span{font-size:inherit!important;line-height:1.05;padding:0 .15em}
.fraction>span:first-child{border-bottom:1.5px solid currentColor;padding-bottom:.08em}
.fraction>span:last-child{padding-top:.08em}

.legend i .fraction,.legend i .fraction>span{color:#1b2838;font-weight:700}
.legend i .fraction{font-size:1em;gap:0}
.tapzones button{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#runScore{position:absolute;top:13%;width:100%;text-align:center;font-size:12px;color:#e4cd91;font-variant-numeric:tabular-nums}
#encounter{position:absolute;top:24%;width:100%;text-align:center;color:#ecdfb6;font-size:11px;padding:0 10px;pointer-events:none}
#count{font-size:clamp(42px,9vw,100px);letter-spacing:-2px}
#collection{position:fixed;inset:95px max(5%,calc((100% - 1050px)/2)) 24px;z-index:6;overflow:auto;background:#0c1828f5;border:1px solid #91aeb533;border-radius:24px;padding:24px;overscroll-behavior:contain}
.collection-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.collection-heading h2{font-size:32px;letter-spacing:-1px;margin:8px 0}.collection-heading p,.collection-note{font-size:12px;color:#a9bccc}.collection-heading button{padding:10px 16px}
#flockGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:12px;margin-top:20px}.sheep-card{background:#142438;border:1px solid #78909c25;border-radius:16px;padding:8px 10px 16px;text-align:center;min-width:0}.sheep-card canvas{width:100%;height:auto;position:static;display:block}.sheep-card h3{font-size:13px;margin:0 0 8px}.sheep-card p{font-size:11px;color:#afc3d3;margin:6px 0}.sheep-card small{color:#b9c5cf;font-size:10px}.sheep-card.mastered{border-color:#e4cd9170}.sheep-card.mastered small{color:#e4cd91}.sheep-card:not(.discovered){opacity:.65}
@media(max-width:600px){header{left:5%;right:5%}.brand{font-size:8px;letter-spacing:.2px}.tools{gap:4px}.tools button{font-size:10px;padding:8px 7px;min-width:0}#collection{inset:80px 4% 14px;padding:16px;border-radius:18px}#flockGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.sheep-card h3{font-size:11px}.sheep-card p{font-size:10px}#encounter{font-size:10px}#runScore{top:14%}}
@media(max-height:500px) and (min-width:601px){#collection{top:75px;padding:16px}#runScore{top:21%;left:42%;width:16%}#encounter{top:38%;font-size:10px}}