:root{color:#f6ecd6;background:#302b22;font-family:system-ui,sans-serif}body{overscroll-behavior:none;margin:0}#start-screen,#play,#turn{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}.spoken{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}#play{--u:min(max(calc(100vw / 1920), calc(100dvh / 1080)), calc(100vw / 1000), calc(100dvh / 760));--left:env(safe-area-inset-left,0px);--right:env(safe-area-inset-right,0px);--bottom:env(safe-area-inset-bottom,0px);font-family:Arial Rounded MT Bold,ui-rounded,Trebuchet MS,system-ui,sans-serif;position:fixed;inset:0;overflow:hidden}#game{position:absolute;inset:0}#game:focus-visible{outline-offset:-3px;outline:3px solid #f8ce78}.touch #game:focus-visible{outline:none}#game canvas{display:block;width:100%!important;height:100%!important}#today{top:calc(24 * var(--u));left:calc(24 * var(--u) + var(--left));align-items:center;gap:calc(22 * var(--u));padding:calc(14 * var(--u)) calc(30 * var(--u)) calc(14 * var(--u)) calc(22 * var(--u));border:calc(5 * var(--u)) solid #2a1606;border-radius:calc(60 * var(--u));box-shadow:0 calc(8 * var(--u)) 0 #1e0e008c, inset 0 calc(4 * var(--u)) calc(8 * var(--u)) #ffdca02e;pointer-events:none;background:#3a220edb;display:flex;position:absolute}#daylight{width:calc(112 * var(--u));height:calc(56 * var(--u));box-sizing:border-box;border:calc(5 * var(--u)) solid #2a1606;border-radius:calc(56 * var(--u)) calc(56 * var(--u)) 0 0;background:var(--sky,#6ab7e0);border-bottom:none;flex:none;position:relative}#sun{width:calc(26 * var(--u));height:calc(26 * var(--u));margin:calc(-13 * var(--u)) 0 0 calc(-13 * var(--u));box-shadow:0 0 calc(14 * var(--u)) #ffd45c;background:radial-gradient(circle at 40% 35%,#fff6b8,#ffd45c 55%,#f6a524);border-radius:50%;position:absolute}#target{align-items:center;gap:calc(18 * var(--u));color:#fffbe8;font-size:calc(38 * var(--u));white-space:nowrap;text-shadow:0 calc(3 * var(--u)) 0 #2a1606;margin:0;font-weight:800;line-height:1;display:flex}#target-leaves{gap:calc(6 * var(--u));max-width:calc(480 * var(--u));flex-wrap:wrap;display:flex}.slot{width:calc(26 * var(--u));height:calc(26 * var(--u));box-sizing:border-box;border:calc(3 * var(--u)) solid #ffecbe80;background:#140a0273;border-radius:0 70%;display:inline-block}.slot.filled{background:radial-gradient(at 35% 25%,#b9ec74,#7cc242 55%,#4d8e26);border-color:#2c5418}#target.met .slot.filled{box-shadow:0 0 calc(10 * var(--u)) #f8e27a}#target.fresh{animation:.9s ease-out target-pop}@keyframes target-pop{0%{transform:scale(1.3)}to{transform:scale(1)}}@media (prefers-reduced-motion:reduce){#target.fresh{animation:none}}.leaf,#pause,#sound{border:calc(6 * var(--u)) solid #2c5418;border-radius:calc(90 * var(--u)) calc(16 * var(--u)) calc(90 * var(--u)) calc(16 * var(--u));box-shadow:0 calc(8 * var(--u)) 0 #2c5418, 0 calc(18 * var(--u)) calc(32 * var(--u)) #1e0e0080, inset 0 calc(-8 * var(--u)) calc(14 * var(--u)) #1e460a59, inset 0 calc(6 * var(--u)) calc(12 * var(--u)) #ffffdc80;color:#fffbe8;cursor:pointer;background:radial-gradient(at 35% 25%,#b9ec74,#7cc242 45%,#4d8e26);transition:transform .15s ease-out;position:relative}.leaf{padding:calc(20 * var(--u)) calc(80 * var(--u)) calc(24 * var(--u));font:800 calc(60 * var(--u))/1 "Arial Rounded MT Bold", ui-rounded, "Trebuchet MS", system-ui, sans-serif;letter-spacing:calc(1.5 * var(--u));text-shadow:0 calc(3 * var(--u)) 0 #2c5418, 0 0 calc(10 * var(--u)) #143c0099}.leaf:before{content:"";left:calc(22 * var(--u));right:calc(22 * var(--u));height:calc(3 * var(--u));border-radius:calc(2 * var(--u));background:#e6fab473;position:absolute;top:50%;transform:rotate(-8deg)}.leaf span{position:relative}:is(.leaf,#pause,#sound):hover{background:radial-gradient(at 35% 25%,#c8f58a,#8bd04f 45%,#57a02c);transform:scale(1.06)rotate(-2deg)}:is(.leaf,#pause,#sound):active{transform:translateY(calc(5 * var(--u))) scale(.98);box-shadow:0 calc(3 * var(--u)) 0 #2c5418, 0 calc(10 * var(--u)) calc(20 * var(--u)) #1e0e0080}:is(.leaf,#pause,#sound):focus-visible{outline:calc(7 * var(--u)) solid #ffe27a;outline-offset:calc(7 * var(--u))}@media (prefers-reduced-motion:reduce){.leaf,#pause,#sound{transition:none}}#pause{top:calc(24 * var(--u));right:calc(24 * var(--u) + var(--right));width:calc(104 * var(--u));height:calc(92 * var(--u));border-radius:calc(46 * var(--u)) calc(14 * var(--u)) calc(46 * var(--u)) calc(14 * var(--u));padding:0;position:absolute}#pause:before,#pause:after{content:"";border-radius:calc(5 * var(--u));width:15%;box-shadow:0 calc(3 * var(--u)) 0 #2c5418;background:#fffbe8;position:absolute;top:26%;bottom:26%}#pause:before{left:29%}#pause:after{right:29%}#sound{top:calc(24 * var(--u));right:calc(148 * var(--u) + var(--right));width:calc(104 * var(--u));height:calc(92 * var(--u));border-radius:calc(46 * var(--u)) calc(14 * var(--u)) calc(46 * var(--u)) calc(14 * var(--u));padding:0;position:absolute}#sound:before{content:"";clip-path:polygon(0 32%,38% 32%,100% 0,100% 100%,38% 68%,0 68%);width:34%;height:48%;filter:drop-shadow(0 calc(3 * var(--u)) 0 #2c5418);background:#fffbe8;position:absolute;top:26%;left:20%}#sound:after{content:"";box-sizing:border-box;border:calc(6 * var(--u)) solid transparent;border-right-color:#fffbe8;border-radius:50%;width:22%;height:44%;position:absolute;top:28%;left:50%}#sound[aria-pressed=false]:after{left:calc(46% - 3.5 * var(--u));width:calc(7 * var(--u));border-radius:calc(4 * var(--u));height:72%;box-shadow:0 calc(3 * var(--u)) 0 #2c5418;background:#fffbe8;border:none;top:14%;transform:rotate(-45deg)}#status{left:50%;bottom:calc(36 * var(--u) + var(--bottom));width:max-content;max-width:calc(100% - 48 * var(--u));padding:calc(12 * var(--u)) calc(34 * var(--u)) calc(14 * var(--u));box-sizing:border-box;text-align:center;font-size:calc(50 * var(--u));color:#fffbe8;text-shadow:0 calc(3 * var(--u)) 0 #1e0c00cc;border-radius:calc(26 * var(--u));pointer-events:none;background:#281206d1;margin:0;font-weight:800;line-height:1.25;position:absolute;transform:translate(-50%)}#status:empty{display:none}#play:has(.curtain:not([hidden])) :is(#status,#hint){opacity:0}kbd{box-sizing:border-box;min-width:calc(58 * var(--u));height:calc(58 * var(--u));padding:0 calc(14 * var(--u));border:calc(4 * var(--u)) solid #5e2408;border-radius:calc(12 * var(--u));box-shadow:0 calc(6 * var(--u)) 0 #5e2408;color:#5e2408;font:800 calc(30 * var(--u))/1 "Arial Rounded MT Bold", ui-rounded, "Trebuchet MS", system-ui, sans-serif;background:#fffdf2;place-items:center;display:inline-grid}kbd.space{min-width:calc(190 * var(--u))}kbd.arrow:before{content:"";border:calc(11 * var(--u)) solid transparent;border-top-width:0;border-bottom:calc(15 * var(--u)) solid #5e2408}kbd.arrow.left:before{transform:rotate(-90deg)}kbd.arrow.down:before{transform:rotate(180deg)}kbd.arrow.right:before{transform:rotate(90deg)}.cluster{gap:calc(12 * var(--u)) calc(8 * var(--u));padding-bottom:calc(6 * var(--u));grid-template-columns:repeat(3,auto);display:inline-grid}.cluster kbd:first-child{grid-column:2}.cluster kbd:nth-child(2){grid-column:1}.mouse{box-sizing:border-box;width:calc(50 * var(--u));height:calc(72 * var(--u));border:calc(4 * var(--u)) solid #5e2408;border-radius:calc(25 * var(--u)) calc(25 * var(--u)) calc(22 * var(--u)) calc(22 * var(--u));box-shadow:0 calc(6 * var(--u)) 0 #5e2408;background:linear-gradient(90deg,#ff9a3c 50%,#fffdf2 50%) top/100% 42% no-repeat,#fffdf2;display:inline-block;position:relative}.mouse:before{content:"";border-top:calc(4 * var(--u)) solid #5e2408;position:absolute;top:42%;left:0;right:0}.mouse:after{content:"";left:calc(50% - 2 * var(--u));border-left:calc(4 * var(--u)) solid #5e2408;height:42%;position:absolute;top:0}#hint{left:50%;bottom:calc(150 * var(--u));align-items:center;gap:calc(30 * var(--u));padding:calc(20 * var(--u)) calc(34 * var(--u)) calc(22 * var(--u));border-radius:calc(30 * var(--u));color:#fffbe8;font-size:calc(40 * var(--u));pointer-events:none;background:#281206d1;font-weight:800;display:flex;position:absolute;transform:translate(-50%)}.curtain{z-index:2;background:#180e068c;place-items:center;display:grid;position:absolute;inset:0}.card{box-sizing:border-box;width:max-content;max-width:calc(100% - 48 * var(--u));padding:calc(36 * var(--u)) calc(72 * var(--u)) calc(56 * var(--u));text-align:center;color:#5e2408;border:calc(6 * var(--u)) solid #5e2408;border-radius:calc(52 * var(--u));box-shadow:0 calc(12 * var(--u)) 0 #5e2408, 0 calc(30 * var(--u)) calc(60 * var(--u)) #14080099;background:linear-gradient(#fff6d8,#f6dca0)}.card h2{margin:0 0 calc(26 * var(--u));color:#ff8a1f;font-size:calc(92 * var(--u));letter-spacing:calc(2 * var(--u));-webkit-text-stroke:calc(10 * var(--u)) #5e2408;paint-order:stroke fill;text-shadow:0 calc(6 * var(--u)) 0 #5e2408;font-weight:800;line-height:1.05}.card p{margin:0 0 calc(40 * var(--u));max-width:calc(900 * var(--u));font-size:calc(46 * var(--u));text-wrap:balance;font-weight:800;line-height:1.3}#controls-help{justify-content:center;align-items:center;gap:calc(30 * var(--u)) calc(44 * var(--u));margin:0 0 calc(48 * var(--u));text-align:left;grid-template-columns:auto auto;display:grid}#controls-help .what{font-size:calc(48 * var(--u));font-weight:800}#controls-help .keys{align-items:center;gap:calc(22 * var(--u));font-size:calc(36 * var(--u));color:#8a5a2c;font-weight:800;display:flex}#stick,.touch-hint,#controls-help .touch{display:none}.touch #stick{display:block}.touch .touch-hint{display:inline}.touch #hint>:not(.touch-hint),.touch #controls-help>:is(.keys-only,.keys:not(.touch)){display:none}.touch #controls-help .touch{display:flex}#stick{left:calc(190 * var(--u) + var(--left));top:calc(100% - 190 * var(--u) - var(--bottom));width:calc(260 * var(--u));height:calc(260 * var(--u));box-sizing:border-box;border:calc(6 * var(--u)) solid #fff6d68c;pointer-events:none;opacity:.75;background:#28120659;border-radius:50%;position:absolute;translate:-50% -50%}#stick.held{opacity:1}#knob{border:calc(5 * var(--u)) solid #2c5418;box-sizing:border-box;width:44%;height:44%;box-shadow:0 calc(6 * var(--u)) 0 #2c5418;background:radial-gradient(at 35% 25%,#b9ec74,#7cc242 45%,#4d8e26);border-radius:50%;margin:-22% 0 0 -22%;position:absolute;top:50%;left:50%}#bite{right:calc(60 * var(--u) + var(--right));bottom:calc(60 * var(--u) + var(--bottom));box-sizing:border-box;width:calc(270 * var(--u));height:calc(220 * var(--u));font:800 calc(64 * var(--u))/calc(208 * var(--u)) "Arial Rounded MT Bold", ui-rounded, "Trebuchet MS", system-ui, sans-serif;text-align:center;letter-spacing:calc(1.5 * var(--u));text-shadow:0 calc(3 * var(--u)) 0 #2c5418;padding:0;display:none;position:absolute}.touch #bite{display:block}#bite.held{transform:translateY(calc(5 * var(--u))) scale(.96);box-shadow:0 calc(3 * var(--u)) 0 #2c5418, 0 0 calc(30 * var(--u)) calc(6 * var(--u)) #ffec8c99}.touch #status{max-width:calc(100% - 2 * (360 * var(--u) + max(var(--left), var(--right))));font-size:calc(44 * var(--u))}.touch #hint{bottom:calc(110 * var(--u) + var(--bottom))}.bite-key{padding:calc(6 * var(--u)) calc(24 * var(--u));border:calc(4 * var(--u)) solid #2c5418;border-radius:calc(40 * var(--u)) calc(8 * var(--u));color:#fffbe8;text-shadow:0 calc(2 * var(--u)) 0 #2c5418;background:#7cc242}#turn{z-index:10;--u:min(calc(100vw / 760), calc(100dvh / 1000));background:#302b22;place-items:center;font-family:Arial Rounded MT Bold,ui-rounded,Trebuchet MS,system-ui,sans-serif;display:none;position:fixed;inset:0}@media (orientation:portrait){.touch #turn{display:grid}}#turn .card{justify-items:center;gap:calc(40 * var(--u));display:grid}#turn p{font-size:calc(56 * var(--u));margin:0}#turn .phone{width:calc(140 * var(--u));height:calc(240 * var(--u));box-sizing:border-box;border:calc(10 * var(--u)) solid #5e2408;border-radius:calc(26 * var(--u));background:#fffdf2;animation:2.4s ease-in-out infinite turn}@keyframes turn{0%,25%{transform:rotate(0)}55%,to{transform:rotate(-90deg)}}@media (prefers-reduced-motion:reduce){#turn .phone{animation:none;transform:rotate(-90deg)}}#start-screen{background:#1c140c;position:fixed;inset:0;overflow:hidden}#start-screen:after{content:"";opacity:0;pointer-events:none;background:#302b22;transition:opacity .55s ease-in;position:absolute;inset:0}#start-screen.leaving:after{opacity:1}#start-screen .stage{--px:0;--py:0;--scale:1;width:1920px;height:1080px;transform:translate(-50%, calc(-50% - var(--lift,0px))) scale(var(--scale));position:absolute;top:50%;left:50%}#start-screen .scene{transform-origin:1100px 556px;position:absolute;inset:0}#start-screen.leaving .scene{animation:.65s cubic-bezier(.55,0,.9,.4) forwards dive}@keyframes dive{to{transform:scale(2.6)}}.stage .layer{display:block;position:absolute}.stage .plate{width:1980px;height:1140px;translate:calc(var(--px) * -10px) calc(var(--py) * -6px);animation:2.4s cubic-bezier(.2,.7,.2,1) backwards plate-in,22s ease-in-out 2.4s infinite alternate plate-drift;inset:-30px}@keyframes plate-in{0%{opacity:0;filter:brightness(.3);transform:scale(1.14)}}@keyframes plate-drift{to{transform:scale(1.035)}}.stage .sunbeam{pointer-events:none;mix-blend-mode:screen;background:radial-gradient(55% 70% at 82% -5%,#ffe2968c,#0000 70%),repeating-linear-gradient(118deg,#0000 0 70px,#ffecb414 70px 120px,#0000 120px 210px);animation:7s ease-in-out infinite alternate beam;inset:0}@keyframes beam{0%{opacity:.45}to{opacity:.85}}#parade{pointer-events:none;translate:calc(var(--px) * -14px) calc(var(--py) * -8px);animation:1.2s ease-out 1s backwards fade-in;inset:0}.stage .ant{pointer-events:none;position:absolute;top:0;left:0}.stage .ant img{width:100%;height:100%;display:block}#pollen{pointer-events:none;translate:calc(var(--px) * -26px) calc(var(--py) * -12px);inset:0;overflow:hidden}#pollen span{background:radial-gradient(circle,#fff6cdf2,#ffdc8c59 45%,#0000 70%);border-radius:50%;animation-name:pollen-rise,twinkle;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite;animation-direction:normal,alternate;position:absolute}@keyframes pollen-rise{0%{transform:translate(0)}50%{transform:translate(30px,-560px)}to{transform:translate(-10px,-1120px)}}@keyframes twinkle{0%{opacity:.25}to{opacity:1}}.stage .hero{z-index:2;translate:calc(var(--px) * -22px) calc(var(--py) * -10px)}.stage .fg{filter:blur(3px)brightness(.82)saturate(1.1);pointer-events:none;width:760px;height:1140px;animation:1.6s cubic-bezier(.2,.7,.2,1) .2s backwards fg-in;bottom:-60px}.stage .fg-left{translate:calc(var(--px) * -40px) calc(var(--py) * -14px);left:-230px}.stage .fg-right{scale:-1 1;translate:calc(var(--px) * -40px) calc(var(--py) * -14px);right:-260px}@keyframes fg-in{0%{opacity:0;transform:translate(-260px)}}.stage .titles{text-align:center;pointer-events:none;translate:calc(var(--px) * -6px) calc(var(--py) * -4px);position:absolute;top:18px;left:0;right:0}#title{margin:0;animation:4s ease-in-out 2s infinite float}#title img{filter:drop-shadow(0 10px #5a22068c)drop-shadow(0 18px 28px #280e0080);transform-origin:50% 90%;width:900px;height:auto;margin:0 auto;animation:1.15s ease-out .7s backwards title-drop;display:block}@keyframes title-drop{0%{transform:translateY(-760px)scale(.92,1.15)}55%{transform:translateY(0)scale(1.14,.82)}70%{transform:translateY(-46px)scale(.95,1.06)}84%{transform:translateY(0)scale(1.05,.95)}93%{transform:translateY(-8px)scale(.99,1.01)}}@keyframes float{50%{transform:translateY(-10px)rotate(-.6deg)}}@keyframes rise-in{0%{opacity:0;transform:translateY(30px)}}@keyframes fade-in{0%{opacity:0}}.stage .play-area{text-align:center;width:520px;translate:calc(var(--px) * -18px) calc(var(--py) * -9px);animation:.7s cubic-bezier(.3,1.6,.5,1) 2.2s backwards pop-in;position:absolute;top:800px;left:470px}@keyframes pop-in{0%{opacity:0;transform:scale(.3)rotate(-12deg)}}#start{color:#fffbe8;letter-spacing:2px;text-shadow:0 4px #2c5418,0 0 12px #143c0099;cursor:pointer;background:radial-gradient(at 35% 25%,#b9ec74,#7cc242 45%,#4d8e26);border:6px solid #2c5418;border-radius:120px 18px;padding:26px 104px 30px;font:800 84px/1 Arial Rounded MT Bold,ui-rounded,Trebuchet MS,system-ui,sans-serif;transition:transform .15s ease-out;position:relative;box-shadow:0 10px #2c5418,0 22px 40px #1e0e008c,inset 0 -10px 18px #1e460a59,inset 0 8px 14px #ffffdc80}#start:before{content:"";background:#e6fab473;border-radius:2px;height:4px;position:absolute;top:50%;left:28px;right:28px;transform:rotate(-8deg)}#start span{position:relative}#start:hover{background:radial-gradient(at 35% 25%,#c8f58a,#8bd04f 45%,#57a02c);transform:scale(1.06)rotate(-2deg)}#start:active{transform:translateY(6px)scale(.98);box-shadow:0 4px #2c5418,0 12px 24px #1e0e0080}#start:focus-visible{outline-offset:8px;outline:8px solid #ffe27a}#start:disabled{cursor:wait;opacity:1}#start.nudged{transform-origin:10%;animation:.7s ease-out nudged}@keyframes nudged{0%{transform:none}35%{transform:translateY(-12px)rotate(-4deg);box-shadow:0 16px #2c5418,0 0 36px 6px #ffec8c99}70%{transform:translateY(-3px)rotate(-1deg)}}#start-screen #error{color:#ffd8ac;background:#281206e0;border-radius:14px;margin:0;padding:12px 20px;font:600 30px/1.3 system-ui,sans-serif;position:absolute;bottom:calc(100% + 18px);left:-120px;right:-120px}#start-screen.settled .plate{animation:22s ease-in-out infinite alternate plate-drift}#start-screen.settled :is(#parade,.hero,.fg,#title img,.play-area){animation:none}@media (prefers-reduced-motion:reduce){#start-screen *,#start-screen :before,#start-screen :after{transition:none!important;animation:none!important}}
