:root{color-scheme:light;--paper:#f5f1e6;--ink:#263e32;--green:#426448;--gold:#dcae3b}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-tap-highlight-color:transparent}main{width:min(100%,440px);margin:auto;padding:22px 18px max(16px,env(safe-area-inset-bottom));}header{text-align:center;padding:0 0 17px}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:700}h1{font:normal 37px/1.05 Georgia,serif;letter-spacing:-1.5px;margin:12px 0 8px}h1 em{font-weight:normal}header p{font-size:12px;margin:0;color:#778072}.game{position:relative;background:#e9ecdc;border:1px solid #d4dac7;border-radius:20px;overflow:hidden}.pour-meter{height:43px;display:flex;align-items:center;gap:12px;padding:0 18px;font-size:8px;font-weight:700;letter-spacing:1.2px}.track{height:4px;background:#cdd4bd;flex:1;border-radius:5px;overflow:hidden}#remaining{height:100%;width:100%;background:var(--green)}#pour-state{min-width:53px;text-align:right}canvas{display:block;width:100%;height:auto;max-height:calc(100svh - 280px);min-height:270px;object-fit:contain;touch-action:none;cursor:grab;outline-offset:-4px}canvas:active{cursor:grabbing}.stats{display:flex;background:#f9f7ef;border-top:1px solid #d4dac7;padding:13px 0}.stats>div{width:50%;display:flex;gap:10px;align-items:center;justify-content:center}.stats>div+div{border-left:1px solid #dddccd}.stats>div>span{font-size:8px;letter-spacing:1.2px;font-weight:bold}.stats strong{font:26px Georgia,serif}.stats strong span{font-size:15px}.stats>div+div strong{color:#a97c4b}footer{text-align:center;padding:13px 0 0}footer p{font-size:12px;margin:0 0 6px;font-weight:bold}footer p>span{font-size:19px;vertical-align:-1px;margin-right:5px}footer small{font-size:10px;color:#7b8174}.result{position:absolute;inset:43px 0 0;background:#e9ecdcdc;backdrop-filter:blur(5px);display:grid;place-items:center;padding:23px}.result[hidden]{display:none}.result-card{width:100%;background:#f9f7ef;border:1px solid #d4dac7;border-radius:15px;padding:28px 23px;box-shadow:0 10px 30px #263e3210}.result-card>.eyebrow{display:block;text-align:center}h2{font:38px Georgia,serif;text-align:center;margin:12px 0 28px}.result-card p{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1px}.result-card strong{font:28px Georgia,serif}button{width:100%;border:0;border-radius:9px;background:var(--ink);color:var(--paper);font-size:12px;font-weight:bold;letter-spacing:1.5px;padding:18px;margin-top:18px;cursor:pointer}button span{float:right;font-size:18px;line-height:14px}button:hover{background:#41654b}button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}@media(min-width:600px){main{padding-top:30px}canvas{max-height:570px}h1{font-size:40px}}@media(max-height:680px){main{padding-top:10px}header{padding-bottom:10px}h1{font-size:30px;margin:7px 0}.eyebrow{font-size:8px}footer{padding-top:8px}}