:root{font-family:Trebuchet MS,Segoe UI,sans-serif;color:#654732;background:#f6f1e6;font-synthesis:none;--brown:#654732;--teal:#477d70;--cream:#f6efdc;--muted:#938a73}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 50% 45%,#eee5cf,#faf7ef 75%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #8bab93;outline-offset:5px}[hidden]{display:none!important}header{max-width:1300px;margin:auto;padding:0 40px;height:97px;display:flex;justify-content:space-between;align-items:center}header a{color:var(--brown);font-size:12px;font-weight:700;letter-spacing:2px;text-decoration:none}header a>span{font-size:29px;color:var(--teal);vertical-align:middle;margin-right:11px}header small{font-size:8px;letter-spacing:3px;margin-left:11px;color:#9b8b6d}.header-note{font-size:8px;letter-spacing:1.7px;color:#9c937d}main{max-width:1216px;margin:14px auto 0;padding:0 32px}.topline{display:flex;justify-content:space-between;color:#9a8d70;font-size:8px;letter-spacing:2px;margin:0 2px 14px}.topline i{display:inline-block;width:6px;height:6px;background:var(--teal);border-radius:50%;margin-right:7px}#game{position:relative;aspect-ratio:16/9;min-height:530px;overflow:hidden;border:1px solid #d7c8aa;border-radius:18px;background:var(--cream);box-shadow:0 14px 50px #7d634612}#canvas{position:absolute;inset:0;touch-action:none}canvas{display:block;width:100%;height:100%}#overlay{position:absolute;inset:0;z-index:2;padding:50px 8%;display:flex;align-items:center;background:linear-gradient(90deg,#f8f0dfee,#f8f0dfdd 48%,#f8f0df55);overflow:auto}#menu{position:relative;width:100%}.eyebrow{font-size:8px;letter-spacing:2px;color:#9b7b51;font-weight:700}h1{font-family:Georgia,serif;font-size:clamp(55px,6.6vw,83px);letter-spacing:-4px;font-weight:400;line-height:1.08;margin:19px 0 13px}h1 em{color:var(--teal);font-weight:400}h1>span{font-size:25px;color:#b79458;vertical-align:top;margin:5px 0 0 6px}.sign-line{font-size:8px;letter-spacing:2px;color:#aa926d;padding-bottom:19px;border-bottom:1px solid #ccb99666;width:370px;max-width:100%}#description{font-size:14px;line-height:1.7;color:#8b8168;margin:23px 0 27px}.primary{padding:17px 25px;min-width:202px;border:0;border-radius:9px;background:var(--teal);color:#fff4d6;font-size:14px;font-weight:700;box-shadow:0 4px #326556}.primary span{margin-left:27px}.primary:hover{background:#568b7b}.best-line{font-size:8px;letter-spacing:1.6px;color:#a59677;margin-top:25px}.best-line strong{color:#7b6548;font-size:12px;margin-left:15px}.back-link{display:inline-block;font-size:10px;color:#8c967a;text-decoration:none;margin-top:11px}.back-link:hover{text-decoration:underline}.hero-stack{position:absolute;right:0;top:50%;width:220px;height:340px;transform:translateY(-50%);pointer-events:none}.hero-stack>div{position:absolute;left:50%;filter:drop-shadow(0 4px 2px #6f543419)}.hero-stack img{width:100%;height:100%;object-fit:fill}.art-toast{width:169px;height:50px;bottom:25px;transform:translate(-50%) rotate(-2deg)}.art-kopi{width:136px;height:80px;bottom:70px;transform:translate(-47%) rotate(4deg)}.art-saucer{width:174px;height:26px;bottom:149px;transform:translate(-53%) rotate(2deg)}.art-teh{width:127px;height:84px;bottom:173px;transform:translate(-49%) rotate(-6deg)}.art-tin{width:99px;height:95px;bottom:251px;transform:translate(-62%) rotate(6deg)}.hero-stack>i{position:absolute;bottom:11px;left:10px;right:10px;height:17px;border-radius:50%;background:#9b795a20}.corner-note{position:absolute;bottom:17px;left:23px;z-index:1;font-size:6px;letter-spacing:1.5px;color:#a89777;pointer-events:none}footer{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.3px;color:#9d947d;margin:22px 2px}footer span:first-child{color:#8c927a}#hud{position:absolute;inset:0 0 auto;z-index:4;display:flex;justify-content:space-between;pointer-events:none;padding:23px 27px;background:linear-gradient(#f6efdc,#f6efdc00)}.stats{display:flex;gap:31px}.stats>div{display:flex;flex-direction:column;gap:5px}.stats small{font-size:8px;letter-spacing:1.5px;color:#a08c6e}.stats strong{font-size:25px;font-weight:600;font-variant-numeric:tabular-nums}#lives{color:#b47353;font-size:23px}.tools{display:flex;gap:8px;pointer-events:auto}.tools button{width:38px;height:38px;border:1px solid #c9bea3;border-radius:9px;color:var(--teal);background:#faf3e1;font-size:19px}.tools button[aria-pressed=true]{background:#e4d7bd}#stack-status{position:absolute;left:27px;right:27px;top:91px;z-index:2;display:flex;justify-content:space-between;color:#8b9477;font-size:8px;letter-spacing:1px;pointer-events:none}#perfect{color:#688e76}#drop-hint{position:absolute;bottom:27px;left:0;right:0;z-index:2;text-align:center;font-size:8px;letter-spacing:1.8px;color:#958061;pointer-events:none}#game[data-phase=playing] .corner-note,#game[data-phase=paused] .corner-note{display:none}#game[data-phase=paused] #overlay,#game[data-phase=over] #overlay{background:#f8f0dfea;text-align:center;justify-content:center;padding-top:95px}#results{display:flex;justify-content:center;gap:45px;margin:25px 0}#results>div{display:flex;flex-direction:column;gap:9px}#results small{font-size:8px;letter-spacing:1.5px;color:#9a8a6d}#results strong{font-size:35px;color:var(--teal)}#instructions{width:600px;max-width:100%;margin:auto;text-align:center}#overlay:has(#instructions:not([hidden])){background:#f8f0dff5;justify-content:center;padding:30px 25px}h2{font-family:Georgia,serif;font-size:42px;font-weight:400;letter-spacing:-1.5px;margin:14px 0}h2 em{color:var(--teal)}.instruction-art{display:flex;justify-content:center;align-items:flex-end;gap:20px;margin:19px 0}.instruction-art img{width:75px;max-height:65px;object-fit:contain}#instructions p{font-size:13px;line-height:1.7;color:#918064}#instructions b{color:#6b7055;font-weight:500}.instruction-rules{display:flex;justify-content:center;gap:32px;padding:20px 0;margin:19px 0;border-top:1px solid #c9b99566;border-bottom:1px solid #c9b99566}.instruction-rules>div{display:flex;align-items:center;gap:10px;text-align:left}.instruction-rules strong{font-family:Georgia,serif;font-size:29px;font-weight:400;color:var(--teal)}.instruction-rules span{font-size:10px;color:#8c846d;line-height:1.6}.small-copy{font-size:11px!important;margin:19px 0 23px}.secondary{display:block;margin:15px auto 0;padding:4px 15px;border:0;background:none;color:#9c8d70;font-size:10px}#splash{position:fixed;inset:0;background:#f6efdc;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}#splash>span{font-size:52px;color:var(--teal)}#splash strong{letter-spacing:5px;font-size:16px;color:#6c4c36}#splash small{font-size:8px;letter-spacing:3px;color:#a68e67}@media(max-width:1000px){.hero-stack{right:-10px;width:180px;transform:translateY(-50%) scale(.9)}h1{font-size:64px}.sign-line{width:320px}}@media(min-width:700px)and (max-height:800px){header{height:65px}main{margin-top:3px}#game{min-height:520px}#overlay{padding:38px 7%}}@media(max-width:699px){header{height:70px;padding:0 21px}header a{font-size:10px;letter-spacing:1.5px}header a>span{font-size:25px;margin-right:7px}header small{font-size:7px;margin-left:8px}.header-note{display:none}main{padding:0 12px;margin:5px auto 0}.topline{font-size:7px;letter-spacing:1.3px;margin-bottom:12px}#game{aspect-ratio:auto;height:calc(100svh - 145px);min-height:475px;border-radius:14px}#overlay{padding:31px 20px;align-items:flex-start;text-align:center;background:linear-gradient(#f8f0dfed,#f8f0df99)}.eyebrow{font-size:7px;letter-spacing:1.5px}h1{font-size:55px;letter-spacing:-3px;margin:14px 0 10px}h1>span{font-size:17px;margin-left:4px}.sign-line{width:auto;font-size:7px;letter-spacing:1.2px;padding-bottom:17px}#description{font-size:12px;margin:17px 0 20px}.primary{min-width:195px;padding:15px 23px;font-size:12px}.best-line{font-size:7px;margin-top:20px}.best-line strong{font-size:11px}.back-link{font-size:9px;margin-top:6px}.hero-stack{position:relative;top:auto;right:auto;left:auto;margin:23px auto 14px;width:170px;height:178px;transform:none}.hero-stack .art-toast{width:114px;height:32px;bottom:6px}.hero-stack .art-kopi{width:91px;height:52px;bottom:35px}.hero-stack .art-saucer{width:113px;height:17px;bottom:86px}.hero-stack .art-teh{width:87px;height:55px;bottom:102px}.hero-stack .art-tin{width:62px;height:58px;bottom:153px}.hero-stack>i{bottom:0;left:20px;right:20px;height:9px}#hud{padding:17px 14px}.stats{gap:23px}.stats small{font-size:7px}.stats strong{font-size:21px}#lives{font-size:18px}.tools{gap:6px}.tools button{width:32px;height:34px;font-size:17px}#stack-status{top:79px;left:15px;right:15px;font-size:7px;letter-spacing:.4px}#drop-hint{font-size:7px;bottom:26px}.corner-note{font-size:5px;bottom:14px;left:17px;letter-spacing:1px}footer{font-size:7px;margin:18px 2px;letter-spacing:1px}footer span:last-child{display:none}#game[data-phase=paused] #overlay,#game[data-phase=over] #overlay{align-items:center;padding:100px 18px 60px}#game[data-phase=paused] h1,#game[data-phase=over] h1{font-size:47px}#instructions{align-self:center}h2{font-size:35px}.instruction-art{gap:15px;margin:20px 0}.instruction-art img{width:64px;max-height:57px}#instructions p{font-size:12px}.instruction-rules{gap:20px;padding:17px 0}.instruction-rules>div{flex-direction:column;gap:7px;text-align:center}.instruction-rules strong{font-size:27px}.instruction-rules span{font-size:9px}.small-copy{font-size:10px!important;margin:17px 0 20px}.stats{gap:18px}}@media(max-width:699px)and (max-height:760px){#overlay{padding-top:25px}.hero-stack{height:116px;margin:18px auto 9px}.hero-stack .art-tin{display:none}.hero-stack .art-teh{width:67px;height:42px;bottom:80px}.hero-stack .art-saucer{width:90px;height:13px;bottom:68px}.hero-stack .art-kopi{width:72px;height:42px;bottom:27px}.hero-stack .art-toast{width:90px;height:25px;bottom:5px}h1{font-size:49px;margin:10px 0}.sign-line{padding-bottom:12px}#description{margin:12px 0 15px}.best-line{margin-top:15px}.instruction-art{margin:12px 0}.instruction-rules{padding:13px 0;margin:14px 0}.small-copy{margin:13px 0 17px}h2{margin:10px 0}}@media(max-width:350px){.stats{gap:13px}.stats strong{font-size:18px}#lives{font-size:16px}.tools button{width:29px}.tools{gap:5px}h1{font-size:44px}.sign-line,.eyebrow{font-size:6px}.hero-stack{margin-top:13px}.instruction-rules{gap:17px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}@media(max-width:699px)and (min-height:761px){.hero-stack{height:211px}}#drop-hint{left:auto;right:18px;bottom:17px;background:#f6efdcdf;padding:7px 10px;border-radius:6px}
