:root{--bg: #1b2333;--red: #e53935;--blue: #1e88e5;--green: #43a047}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:#fff;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}#app{height:100dvh;display:flex;align-items:center;justify-content:center;overflow:hidden}.board{position:relative;width:min(100%,480px,76dvh);padding:0 10px;display:grid;grid-template-columns:repeat(8,1fr);column-gap:6px;row-gap:7%;align-items:end}.slot{position:relative;cursor:pointer;touch-action:manipulation}.slot.animating{z-index:10}.bottle{position:relative;width:100%;aspect-ratio:1 / 2.3;transition:transform .15s ease-out}.slot.selected .bottle{transform:translateY(-14%)}.slot.animating .bottle{transition:none}.neck{position:absolute;top:0;left:22%;width:56%;height:26%;border:2px solid rgba(255,255,255,.5);border-bottom:none;border-radius:4px 4px 0 0;background:#ffffff0f}.glass{position:absolute;bottom:0;left:0;right:0;height:78%;border:2px solid rgba(255,255,255,.55);border-radius:10px 10px 18px 18px;background:#ffffff12;overflow:hidden}.liquid{position:absolute;inset:0;display:flex;flex-direction:column-reverse}.layer{flex:0 0 25%;background:var(--c);box-shadow:inset 3px 0 #ffffff38,inset 0 -2px #0000002e}.layer[data-color=red]{--c: var(--red)}.layer[data-color=blue]{--c: var(--blue)}.layer[data-color=green]{--c: var(--green)}.cork{position:absolute;top:-5%;left:20%;width:60%;height:11%;background:#b9803f;border-radius:4px;box-shadow:inset 0 -3px #0003;opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s}.complete .cork{opacity:1;transform:none}.check{position:absolute;left:50%;top:50%;width:62%;aspect-ratio:1;margin-left:-31%;margin-top:-31%;border-radius:50%;background:#35d466;box-shadow:0 0 0 2px #fff;transform:scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}.check:after{content:"";position:absolute;left:34%;top:16%;width:26%;height:52%;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}.complete .check{transform:scale(1)}.stream{position:absolute;width:5px;margin-left:-2px;border-radius:3px;background:var(--c);transform-origin:top;pointer-events:none;z-index:20}.stream[data-color=red]{--c: var(--red)}.stream[data-color=blue]{--c: var(--blue)}.stream[data-color=green]{--c: var(--green)}.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0e18cc;z-index:100}.win-card{text-align:center;padding:24px}.win-card h1{margin:0 0 20px;font-size:32px}.win-card button{font:inherit;font-size:18px;font-weight:600;padding:14px 28px;border:0;border-radius:12px;background:#35d466;color:#08210f;cursor:pointer}