:root { --magic-bg: #11172f; --glass: rgba(225,244,255,.25); --glass-line: rgba(226,247,255,.78); }
body { background: radial-gradient(circle at 50% 18%, #26366f 0, #11172f 48%, #090d20 100%); }
.water-shell { color: #f8f4ff; }
.water-shell .game-header { border-color: rgba(255,255,255,.18); }
.water-shell .game-header h1,
.water-shell .metric-value { color: #f8f4ff; text-shadow: 0 1px 12px rgba(118,151,255,.2); }
.water-shell .scorebar { border-color: rgba(255,255,255,.16); background: rgba(7,12,31,.55); }
.water-shell .metric-label { color: #b9c7ef; }
.water-stage { position: relative; overflow: hidden; min-height: 0; border-radius: 1.4rem; background: linear-gradient(180deg, rgba(31,44,94,.58), rgba(7,12,31,.62)); box-shadow: inset 0 0 50px rgba(74,111,255,.16); }
.magic-haze { position: absolute; inset: auto 8% 2% 8%; height: 30%; border-radius: 50%; background: #7568ff; opacity: .12; filter: blur(35px); pointer-events: none; }
.bottle-board { position: relative; z-index: 1; width: min(100%, 48rem); height: calc(100% - 2rem); margin: auto; padding: clamp(.55rem, 2vh, 1.1rem) .5rem; display: grid; grid-template-columns: repeat(var(--columns, 5), minmax(2.8rem, 1fr)); align-content: center; justify-items: center; gap: clamp(.8rem, 3vh, 2rem) clamp(.25rem, 1.5vw, .9rem); }
.bottle { position: relative; width: clamp(2.75rem, 10vw, 4.25rem); height: clamp(8.4rem, 26vh, 12.5rem); padding: 1.2rem .28rem .38rem; border: 0; background: transparent; cursor: pointer; filter: drop-shadow(0 10px 8px rgba(0,0,0,.2)); transition: transform .18s ease, filter .18s ease; }
.bottle:hover { transform: translateY(-4px); }
.bottle.selected { transform: translateY(-12px); filter: drop-shadow(0 0 12px #c4b5ff); }
.bottle.hinted { animation: bottle-hint .7s ease-in-out 2; }
.bottle.invalid { animation: bottle-shake .26s ease; }
.flying-bottle { position: fixed; z-index: 1002; margin: 0; pointer-events: none; transform-origin: 50% 13%; transition: none; will-change: transform; }
.flying-bottle:hover { transform: none; }
.pour-stream { position: fixed; z-index: 1003; overflow: visible; opacity: 0; pointer-events: none; filter: drop-shadow(0 0 7px var(--glow)); }
.pour-stream-path { fill: none; stroke: var(--liquid); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.pour-droplet { fill: var(--liquid); filter: drop-shadow(0 0 4px var(--glow)); transform-box: fill-box; transform-origin: center; }
.bottle-neck { position: absolute; z-index: 3; top: .3rem; left: 29%; width: 42%; height: 1.25rem; border: 3px solid var(--glass-line); border-bottom: 0; border-radius: .32rem .32rem 0 0; background: rgba(255,255,255,.08); }
.bottle-neck::before { content: ''; position: absolute; top: -.28rem; left: -.28rem; right: -.28rem; height: .28rem; border: 2px solid var(--glass-line); border-radius: 999px; background: rgba(255,255,255,.14); }
.bottle-body { position: absolute; inset: 1.35rem .18rem .2rem; overflow: hidden; display: flex; flex-direction: column-reverse; border: 3px solid var(--glass-line); border-radius: .8rem .8rem 1.1rem 1.1rem; background: linear-gradient(100deg, rgba(255,255,255,.16), rgba(255,255,255,.03) 42%, rgba(255,255,255,.12)); box-shadow: inset 7px 0 8px rgba(255,255,255,.1); }
.liquid { position: relative; flex: 0 0 25%; background: var(--liquid); box-shadow: inset 0 5px rgba(255,255,255,.18), inset 0 -4px rgba(0,0,0,.12), 0 0 13px var(--glow); animation: liquid-settle .35s cubic-bezier(.2,.8,.2,1) both; }
.liquid::after { content: ''; position: absolute; inset: 12% 12% auto; height: 13%; border-radius: 50%; background: rgba(255,255,255,.25); }
.receiving-liquid { position: absolute; z-index: 2; right: 0; left: 0; overflow: visible; background: linear-gradient(90deg, color-mix(in srgb, var(--liquid) 82%, white), var(--liquid) 26%, var(--liquid) 74%, color-mix(in srgb, var(--liquid) 84%, black)); box-shadow: 0 0 15px var(--glow), inset 0 5px rgba(255,255,255,.2); transform: scaleY(0); transform-origin: bottom; }
.receiving-liquid::after { content: ''; position: absolute; inset: 18% 18% auto; height: 13%; border-radius: 50%; background: rgba(255,255,255,.22); }
.receiving-surface { position: absolute; top: -.28rem; right: -8%; left: -8%; height: .52rem; border-radius: 50%; background: color-mix(in srgb, var(--liquid) 78%, white); box-shadow: 0 -2px 8px rgba(255,255,255,.3), 0 2px 7px var(--glow); }
.c0 { --liquid: #ff647c; --glow: #ff647c; }.c1 { --liquid: #ffc83d; --glow: #ffc83d; }.c2 { --liquid: #37d5bc; --glow: #37d5bc; }.c3 { --liquid: #48a8ff; --glow: #48a8ff; }.c4 { --liquid: #a875ff; --glow: #a875ff; }.c5 { --liquid: #ff74d4; --glow: #ff74d4; }.c6 { --liquid: #81e65c; --glow: #81e65c; }.c7 { --liquid: #ff8d3f; --glow: #ff8d3f; }.c8 { --liquid: #52e5f2; --glow: #52e5f2; }.c9 { --liquid: #d6e65b; --glow: #d6e65b; }
.bottle-number { position: absolute; left: 50%; bottom: -.9rem; transform: translateX(-50%); color: #9faed8; font-size: .68rem; font-weight: 800; }
.water-message { position: absolute; z-index: 2; right: .5rem; bottom: .35rem; left: .5rem; min-height: 1.25rem; margin: 0; text-align: center; color: #c8d2ef; font-size: .78rem; font-weight: 700; }
.water-shell .game-actions { flex-wrap: nowrap; }
.win-sparkle { color: #ffc83d; font-size: 3.2rem; line-height: 1; animation: sparkle 1s ease-in-out infinite alternate; }
@keyframes liquid-settle { from { transform: translateY(-35%); opacity: .6; } }
@keyframes bottle-hint { 50% { transform: translateY(-13px); filter: drop-shadow(0 0 16px #ffc83d); } }
@keyframes bottle-shake { 30% { transform: translateX(-5px); } 70% { transform: translateX(5px); } }
@keyframes sparkle { to { transform: rotate(20deg) scale(1.15); text-shadow: 0 0 22px #ffc83d; } }
@media (max-width: 520px) { .bottle-board { grid-template-columns: repeat(var(--columns-mobile, 4), minmax(2.7rem, 1fr)); gap: clamp(.45rem, 1.5vh, .8rem) .1rem; } .bottle { height: clamp(6.9rem, 19vh, 9.2rem); width: clamp(2.65rem, 16vw, 3.65rem); } .bottle-number { display: none; } }
@media (max-height: 650px) and (orientation: landscape) { .bottle-board { grid-template-columns: repeat(var(--bottles, 5), minmax(2.6rem, 1fr)); gap: .15rem; } .bottle { height: min(44vh, 9.2rem); width: clamp(2.5rem, 7vw, 3.4rem); } .water-message { display: none; } }
@media (prefers-reduced-motion: reduce) { .liquid, .bottle, .win-sparkle, .pour-stream { animation: none; transition: none; } }