*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:ui-rounded,'Trebuchet MS',Arial,sans-serif;color:#074b35;background:#72c6e1}button,select{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.55}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:4px;box-shadow:0 0 0 7px #07543b}button:active:not(:disabled){transform:translateY(2px)}[hidden]{display:none!important}.game{position:relative;width:100%;height:100%;height:100dvh;isolation:isolate;overflow:hidden;padding-top:env(safe-area-inset-top)}.landscape,.vignette{position:absolute;inset:0;z-index:-2}.landscape{background:#76cfed url('assets/farm-day-v4.webp') center center/cover no-repeat;transition:background-image .5s}.vignette{z-index:-1;background:linear-gradient(180deg,#17442c15 0%,transparent 45%,#05372855 100%)}.brand{position:absolute;top:24px;left:26px;width:145px;padding:12px 15px;background:#fff9deeb;border-radius:18px;box-shadow:0 5px 18px #133c2520;z-index:5}.brand img{display:block;width:100%;height:auto}.toolbar{position:absolute;right:24px;top:24px;display:flex;gap:9px;z-index:8}.toolbar button{width:44px;height:44px;display:grid;place-items:center;border:1px solid #ffffff80;border-bottom:3px solid #decfa5;background:#fff9deed;border-radius:14px;color:#07523b;font-size:26px;font-weight:700;box-shadow:0 5px 16px #1a35291a}.toolbar button[aria-pressed=true]{background:#ffdf46}.hud{position:absolute;top:24px;left:50%;transform:translateX(-50%);display:flex;gap:0;background:#fffbecec;border:1px solid #ffffffb0;border-bottom:4px solid #dfd2a6;border-radius:20px;box-shadow:0 6px 22px #28422920;padding:12px 8px;z-index:5;min-width:330px}.stat{padding:0 18px;text-align:center;border-right:1px solid #19584120}.stat:last-child{border:0}.stat>span{font-size:12px;font-weight:800;display:block;text-transform:uppercase;letter-spacing:1px;margin-bottom:3px}.stat strong{font-size:27px;line-height:1}.stat strong span{font-size:15px;margin-left:2px;font-weight:600}.time.urgent{color:#bf452b}.playfield{position:absolute;left:50%;transform:translateX(-50%);top:0;bottom:28px;width:min(100%,720px);touch-action:none;user-select:none;-webkit-user-select:none}canvas{display:block;width:100%;height:100%;touch-action:none}.belt-caption{position:absolute;top:18%;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:2px;color:#fff6cc;font-weight:900;text-shadow:0 1px 3px #102c20;pointer-events:none}.live-hint{position:absolute;top:31%;left:50%;transform:translateX(-50%);width:max-content;max-width:88%;text-align:center;border-radius:30px;padding:10px 18px;background:#fff9e9de;color:#0a5139;font-weight:700;font-size:14px;pointer-events:none;opacity:0;transition:opacity .3s}.game.playing .live-hint.visible{opacity:1}.bins{position:absolute;inset:0;pointer-events:none}.bin{position:absolute;bottom:5.5%;width:28%;height:24%;border:0;background:transparent;color:#fffef0;pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 0 4px;text-shadow:0 2px 4px #143b2d85;border-radius:22px}.bin:nth-child(1){left:5%}.bin:nth-child(2){left:36%}.bin:nth-child(3){left:67%}.size{position:absolute;top:8%;left:50%;transform:translateX(-50%);width:48px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:30px;font-weight:1000;color:#fff9d3;text-shadow:0 2px 0 #12352650;border:2px solid #fffbdd70;border-bottom:4px solid #14382670;box-shadow:0 3px 8px #21392340}.size.s{background:#09805b}.size.m{background:#cd8538}.size.l{background:#b75330}.bin-name{font-size:15px;font-weight:800;letter-spacing:.4px;margin-bottom:3px}.fill{background:#fff9e6;color:#07543a;border-radius:20px;padding:4px 12px;font-size:13px;font-weight:900;text-shadow:none;box-shadow:0 2px 5px #163d2425}.bin.target{background:#fff6bf30;box-shadow:inset 0 0 0 3px #fff7b575}.bin.flash{animation:bin-bounce .35s}.bin.wrong{animation:bin-wrong .4s}.combo{position:absolute;left:50%;transform:translateX(-50%);top:11%;color:#07573b;background:#ffdf48;border:2px solid #fff7b5;border-bottom:3px solid #c58d29;padding:8px 18px;border-radius:30px;font-size:16px;font-weight:900;opacity:0;transition:opacity .2s;z-index:4;pointer-events:none}.combo.show{opacity:1}.footnote{position:absolute;bottom:max(10px,env(safe-area-inset-bottom));left:24px;right:24px;display:flex;justify-content:space-between;color:#fff7db;font-size:12px;font-weight:800;text-shadow:0 1px 3px #06472f;pointer-events:none}.overlay{position:absolute;inset:0;display:grid;place-items:center;z-index:7;background:#072c2520;backdrop-filter:blur(3px);padding:90px 16px 25px;overflow-y:auto}.card{width:min(450px,100%);text-align:center;background:linear-gradient(145deg,#fffdee,#fff2cc);border:2px solid #ffffff;border-bottom:7px solid #d4b873;border-radius:30px;padding:25px 32px 22px;box-shadow:0 20px 70px #11382442,0 4px 0 #796e4c30}.eyebrow{font-size:11px;font-weight:900;letter-spacing:2px;color:#a67e33;margin-bottom:12px}h1{font-size:clamp(38px,5vw,57px);letter-spacing:-2px;line-height:1.05;margin:0;color:#07523b;font-weight:1000;text-shadow:0 2px 0 #fff}.title-word{display:flex;align-items:center;justify-content:center;height:77px;gap:1px;white-space:nowrap}.title-word>img{height:78px;width:66px;object-fit:contain;transform:rotate(-8deg);margin-right:-1px}.intro{font-size:17px;line-height:1.5;margin:10px 0 18px;color:#48674b}.howto{display:flex;align-items:center;justify-content:center;gap:13px;background:#eee8bd70;border-radius:15px;padding:12px;margin-bottom:20px}.howto p{margin:0;font-size:14px;line-height:1.6;text-align:left}.step-icon{font-size:29px}.primary{width:100%;border:2px solid #ffe786;border-bottom:5px solid #c98728;background:linear-gradient(#ffe263,#ffd137);color:#07523b;font-weight:1000;font-size:21px;border-radius:16px;padding:14px 16px;box-shadow:0 6px 14px #a98b3125;transition:filter .15s}.primary:hover{filter:brightness(1.035)}.secondary{border:1px solid #aac5a8;border-bottom:3px solid #aac5a8;background:#f5fae9;border-radius:13px;padding:11px 14px;color:#07553b;font-size:15px;font-weight:800;width:100%;margin-top:12px}.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0 0;text-align:left}.choices label{font-size:12px;font-weight:800;color:#53745a}.choices select{display:block;width:100%;border:1px solid #b9c6a7;background:#fffcf0;color:#07523b;padding:8px 6px;margin-top:5px;border-radius:9px;font-size:14px;font-weight:700}.small{font-size:12px;margin:15px 0 0;color:#6b785b}.keyboard{font-size:11px;margin:6px 0 0;color:#6b785b}h2{font-size:34px;line-height:1.1;letter-spacing:-1px;margin:5px 0 14px}.compact{padding:30px}.compact>p{color:#537055;line-height:1.5}.text-button{background:none;border:0;color:#537055;text-decoration:underline;margin-top:18px;font-size:14px}.result-score{display:flex;align-items:baseline;justify-content:center;gap:9px;color:#07533b}.result-score strong{font-size:68px;letter-spacing:-3px}.result-score span{font-size:16px;font-weight:800}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;background:#edeacb80;border-radius:16px;padding:15px 5px;margin:20px 0}.result-stats strong{display:block;font-size:26px}.result-stats span{font-size:11px;font-weight:800}.new-record{font-weight:900;color:#a06c12!important;min-height:20px}.load-error{position:absolute;z-index:20;left:5%;right:5%;bottom:20px;background:#fff7d7;padding:20px;border-radius:15px;text-align:center}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.game:not(.playing) .bins{pointer-events:none}.game:not(.playing) .bin{pointer-events:none}.game:not(.playing) .hud{opacity:.45}.game:not(.playing) .combo{opacity:0}.game:not(.playing) .belt-caption{opacity:.5}.game.paused .hud{opacity:1}@keyframes bin-bounce{50%{transform:translateY(-8px)}}@keyframes bin-wrong{25%,75%{transform:translateX(6px)}50%{transform:translateX(-6px)}}
@media(max-width:900px){.brand{width:106px;left:14px;top:15px;padding:9px 11px;border-radius:13px}.toolbar{right:14px;top:15px;gap:6px}.toolbar button{width:38px;height:38px;font-size:23px;border-radius:11px}.hud{top:100px;min-width:310px;padding:10px 5px}.stat{padding:0 14px}.stat strong{font-size:25px}.combo{top:166px}.belt-caption{top:24.3%}.overlay{padding-top:100px}.playfield{width:min(100%,610px)}}
@media(max-width:550px){.brand{width:88px;top:max(12px,env(safe-area-inset-top));left:12px;padding:6px 9px}.toolbar{top:max(12px,env(safe-area-inset-top));right:12px}.toolbar button{width:36px;height:36px;border-radius:10px;font-size:23px}.hud{top:85px;width:calc(100% - 28px);min-width:0;padding:9px 3px;border-radius:15px;border-bottom-width:3px;justify-content:space-around}.stat{padding:0 9px;flex:1}.stat>span{font-size:10px;letter-spacing:.7px}.stat strong{font-size:23px}.stat strong span{font-size:13px}.combo{top:151px;font-size:13px;padding:6px 12px}.belt-caption{font-size:9px;letter-spacing:1.6px;top:24%}.overlay{padding:85px 17px 25px;backdrop-filter:blur(2px)}.card{border-radius:24px;padding:21px 24px 17px;max-width:390px}.eyebrow{font-size:10px;letter-spacing:1.5px;margin-bottom:11px}h1{font-size:46px}.title-word{height:64px}.title-word img{height:66px;width:55px}.intro{font-size:15px;margin:7px 0 13px}.howto{padding:9px;gap:9px;margin-bottom:15px}.howto p{font-size:13px}.primary{font-size:19px;padding:12px}.choices{margin-top:13px;gap:10px}.small{font-size:11px}.keyboard{display:none}.live-hint{font-size:12px;padding:8px 11px;top:36%;max-width:94%}.bin-name{font-size:13px}.size{height:37px;width:42px;font-size:26px;border-radius:10px;top:7%}.fill{font-size:12px;padding:3px 9px}.footnote{left:12px;right:12px;font-size:10px}.compact{padding:23px}.compact h2{font-size:30px}.result-score strong{font-size:60px}}
@media(max-height:650px) and (min-width:650px){.brand{width:105px;top:14px;left:18px}.hud{top:14px}.toolbar{top:14px;right:18px}.overlay{padding:18px}.card{padding:16px 25px;width:420px}h1{font-size:41px}.title-word{height:53px}.title-word img{height:59px;width:50px}.intro{margin:5px 0 8px;font-size:14px}.howto{margin-bottom:10px;padding:6px}.primary{padding:10px;font-size:18px}.choices{margin-top:10px}.small{margin-top:8px}.keyboard{margin-top:3px}.eyebrow{margin-bottom:5px}.size{top:2%;height:34px;width:38px;font-size:23px}.bin-name{font-size:12px}.fill{font-size:11px;padding:2px 8px}.combo{top:95px}.belt-caption{top:21%}.live-hint{top:37%}.compact h2{font-size:28px}.result-score strong{font-size:50px}.result-stats{margin:10px 0;padding:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.overlay{overflow-x:hidden}.card{min-width:0}
.choices{grid-template-columns:1fr;max-width:230px;margin-left:auto;margin-right:auto}.choices label{text-align:center}.choices select{text-align:center}
canvas:focus{outline:none}canvas:focus-visible{outline:2px solid #fff6;outline-offset:-2px}
@media(max-width:550px){h1{font-size:clamp(36px,11.8vw,46px)}}
@media(max-width:350px){.title-word img{width:44px;height:58px}.card{padding-left:19px;padding-right:19px}.toolbar{gap:5px}.toolbar button{width:33px}}
.toolbar .music-button{width:100px;font-size:16px;white-space:nowrap}.keyboard-guide{background:#07543b;color:#fffbe3;border-radius:15px;padding:12px;margin:0 0 16px;font-size:15px}.key-mapping{display:flex;justify-content:center;gap:18px;margin:9px 0;font-weight:900;font-size:18px}kbd{font:900 14px ui-rounded,'Trebuchet MS',sans-serif;display:inline-grid;place-items:center;min-width:23px;height:24px;border-radius:5px;background:#fff8dc;color:#07543b;border-bottom:3px solid #c7b780;text-shadow:none}.keyboard-guide p{font-size:14px;line-height:1.5;margin:0}.howto p{font-size:16px;line-height:1.45}.music-note{font-size:14px;line-height:1.4;color:#537055;margin:12px 0 0}.bin-name kbd{margin-left:3px;height:21px;min-width:21px;font-size:13px}.bin .size{top:-2%}.howto{margin-bottom:12px}.intro{margin-bottom:12px}
@media(max-width:900px){.toolbar .music-button{width:86px;font-size:14px}}
@media(max-width:550px){.toolbar .music-button{width:80px;font-size:14px}.howto p{font-size:14px}.keyboard-guide{padding:10px;margin-bottom:12px}.keyboard-guide p{font-size:13px}.key-mapping{font-size:16px;margin:7px 0}.music-note{font-size:13px}.card{padding:16px 20px}.eyebrow{margin-bottom:7px}.title-word{height:60px}.choices{margin-top:12px}.bin .size{top:1%}}
@media(max-height:650px) and (min-width:650px){.card{width:520px;padding:14px 24px}.howto{margin-bottom:8px;padding:7px}.howto p{font-size:14px}.keyboard-guide{padding:8px;margin-bottom:8px}.key-mapping{margin:5px 0}.keyboard-guide p{font-size:13px}.music-note{font-size:12px;margin-top:7px}.overlay{place-items:start center}.bin .size{top:-17%}}
#start-card{width:min(520px,100%)}
@media(min-width:551px) and (min-height:651px){#start-card{padding:20px 28px}#start-card h1{font-size:50px}#start-card .title-word{height:64px}#start-card .title-word img{height:67px;width:57px}#start-card .intro{margin:7px 0 10px}#start-card .choices{margin-top:12px}#start-card .small{margin-top:10px}}
@media(max-width:550px){#start-card{max-width:390px}}
.welcome-card{width:min(560px,100%);padding:22px 30px}.welcome-card .farm-couple{position:relative;width:100%;aspect-ratio:3/2;margin:4px auto 0}.couple-art{width:100%;height:100%;object-fit:contain;display:block}.bib-logo{position:absolute;width:13%;background:#fffbe6;border-radius:4px;padding:3px;transform:rotate(-3deg)}.bib-logo-man{left:25%;top:56%}.bib-logo-woman{left:63%;top:56%;transform:rotate(3deg)}.welcome-line{font-size:17px;font-weight:800;margin:5px 0 16px;color:#315c40}.welcome-card .secondary{margin-top:9px}.welcome-card .title-word{height:65px}.welcome-card .title-word img{height:69px;width:58px}.welcome-card h1{font-size:51px}
.landscape{background-image:url('assets/farm-day-v4.webp')}
@media(max-width:550px){.welcome-card{padding:18px 22px}.welcome-card h1{font-size:42px}.welcome-card .title-word{height:58px}.welcome-card .title-word img{height:62px;width:52px}.welcome-line{font-size:15px;margin-bottom:13px}}
@media(max-height:650px){.welcome-card .farm-couple{max-width:320px}.welcome-card h1{font-size:36px}.welcome-card .title-word{height:49px}.welcome-card .title-word img{height:54px;width:45px}.welcome-card{padding:14px 22px}.welcome-line{font-size:14px;margin:0 0 10px}.welcome-card .farm-couple{max-height:180px}.welcome-card .secondary{padding:8px 10px}.welcome-card .primary{padding:10px 12px}}
.bib-logo{transform:translate(-50%,-50%);padding:0;background:transparent;border-radius:0}.bib-logo-man{left:40.5%;top:58.3%;width:7%;transform:translate(-50%,-50%) rotate(2deg)}.bib-logo-woman{left:62.4%;top:62.6%;width:6.8%;transform:translate(-50%,-50%) rotate(-4deg)}
.bin-name kbd{font-size:17px;min-width:24px;height:24px}.key-mapping kbd{font-size:20px;min-width:29px;height:29px}.keyboard-guide p kbd{font-size:17px}
.landscape{background-image:url('assets/farm-day-v4.webp')}
.bib-logo-man{left:41.2%;top:58.2%}.bib-logo-woman{left:63.6%;top:63.3%}

.footnote{align-items:center;gap:10px;bottom:max(5px,env(safe-area-inset-bottom));z-index:9}
.footnote .imprint-link{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;min-width:96px;min-height:44px;padding:8px 14px;border-radius:12px;background:#fff9e6;color:#07543b;text-shadow:none;font-size:14px;font-weight:800;text-underline-offset:3px;box-shadow:0 2px 8px #163d2440}
.welcome-imprint{display:flex;align-items:center;justify-content:center;min-height:44px;width:max-content;max-width:100%;margin:20px auto 0;padding:8px 20px;border-radius:10px;color:#07543b;font-size:15px;font-weight:800;text-underline-offset:3px}
.game:has(.overlay:not([hidden]) #welcome-card:not([hidden])) .footnote .imprint-link{visibility:hidden;pointer-events:none}
.overlay{padding-bottom:64px}
.imprint-dialog{width:min(660px,calc(100% - 28px));max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:0;border:2px solid #fff;border-bottom:6px solid #d4b873;border-radius:24px;background:#fff9e6;color:#074b35;box-shadow:0 20px 70px #11382455;overflow:hidden}
.imprint-dialog::backdrop{background:#072c2580;backdrop-filter:blur(3px)}
.imprint-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;border-bottom:1px solid #07543b25}
.imprint-header h2{font-size:30px;letter-spacing:-1px;line-height:1.2;margin:0}
.imprint-header button{min-height:44px;padding:10px 16px;border:1px solid #aac5a8;border-bottom:3px solid #aac5a8;background:#f5fae9;color:#07543b;font-size:16px;font-weight:800;border-radius:12px}
.imprint-body{max-height:calc(100dvh - 136px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;padding:22px 24px;font-size:16px;line-height:1.6;text-align:left;touch-action:pan-y}
.imprint-body h2{font-size:21px;letter-spacing:0;line-height:1.3;margin:24px 0 8px}
.imprint-body address{font-style:normal}
.imprint-body p{margin:0 0 16px}
.imprint-body .legal-note{font-size:14px;color:#48674b}
.imprint-body a{color:#07543b;text-underline-offset:3px;overflow-wrap:anywhere}
@media(max-width:550px){.footnote{left:12px;right:12px;gap:6px}.footnote .imprint-link{min-width:88px;padding:8px 10px}.footnote>span{max-width:30%}.welcome-imprint{margin-top:20px}.imprint-header{padding:14px 18px;gap:10px}.imprint-header h2{font-size:26px}.imprint-body{padding:18px}.overlay{padding-bottom:64px}}
@media(min-width:551px) and (max-height:800px){.welcome-card{padding:16px 24px}.welcome-card .farm-couple{max-width:300px;margin-top:0}.welcome-card h1{font-size:38px}.welcome-card .title-word{height:52px}.welcome-card .title-word img{height:56px;width:47px}.welcome-card .eyebrow{margin-bottom:6px}.welcome-line{font-size:15px;margin:0 0 12px}}

/* Fit the welcome screen to the actual iframe height, retaining scroll for long help text. */
.overlay:has(> .welcome-card:not([hidden])){padding-top:76px;padding-bottom:28px}
@media(min-height:651px) and (max-height:900px){
  .welcome-card{padding:16px 24px}
  .welcome-card .farm-couple{max-width:min(450px,calc((100dvh - 510px)*1.5));margin-top:0}
  .welcome-card h1{font-size:38px}
  .welcome-card .title-word{height:52px}
  .welcome-card .title-word img{height:56px;width:47px}
  .welcome-card .eyebrow{margin-bottom:6px}
  .welcome-line{font-size:15px;margin:0 0 12px}
}