:root {
    /* ide jön az általad megadott alakzat – bármilyen 1-utas SVG */
    --cm-shape: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:serif="http://www.serif.com/" width="100%" height="100%" viewBox="0 0 212 216" version="1.1" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><g transform="matrix(1,0,0,1,-363.613635,-358.957574)"><path d="M549.327,453.384L549.268,448.08C549.313,447.763 549.347,447.444 549.367,447.121C549.755,446.541 549.43,446.57 549.386,446.574C549.342,442.332 559.66,436.787 552.953,431.887C541.742,423.699 535.209,425.946 538.353,414.557C538.838,412.797 539.855,411.171 540.075,409.359C541,401.741 538.339,399.031 538.162,397.977C521.828,408.056 517.757,414.345 518.033,407.137C518.271,400.931 519.794,394.842 520.712,388.699L514.343,388.684C512.166,390.023 511.602,393.089 509.671,394.763C507.266,396.849 498.63,391.422 498.204,388.867C497.97,387.465 510.772,361.16 507.715,359.356C504.365,357.38 486.265,385.421 473.858,390.202C454.919,397.5 459.916,384.33 454.563,364.859C454.195,363.522 450.278,362.952 450.188,363.586C449.494,368.464 450.334,373.443 450.157,378.368C449.128,407.07 436.866,370.835 436.691,370.536C431.584,361.8 436.205,374.196 432.208,383.402C430.683,386.913 427.032,389.256 425.642,392.823C418.81,399.131 419.076,404.703 411.453,399.402C402.677,393.3 402.478,392.289 401.288,393.373C397.81,396.542 403.201,414.045 398.454,416.674C394.526,418.848 389.683,418.986 385.756,421.16L391.847,431.455L387.752,435.786C387.112,435.736 381.136,435.266 379.902,437.456C377.083,442.455 376.638,448.535 373.988,453.626C367.317,459.495 356.952,459.464 365.263,462.258C378.224,466.616 381.498,465.979 379.04,468.757C370.61,478.282 368.726,479.229 373.96,490.939C378.076,500.146 380.685,499.392 382.484,501.395C388.737,508.359 380.834,511.623 387.226,518.601C387.749,520.731 387.134,522.993 386.878,525.17C385.738,534.834 386.891,534.689 386.686,544.506C393.628,543.231 400.139,540.054 407.099,538.88C408.185,538.697 412.018,542.592 411.832,543.744C411.007,548.841 408.162,553.46 407.271,558.545C413.402,554.939 418.646,549.949 424.777,546.343C425.327,546.02 426.558,546.63 426.458,547.261C425.447,553.647 422.667,559.667 421.655,566.052C422.893,565.047 424.851,567.846 426.302,567.185C427.955,566.432 428.315,564.158 429.242,562.595C430.188,561.001 430.657,559.08 431.915,557.719C433.241,557.739 434.418,556.822 435.713,556.54C442.057,555.158 439.893,558.979 441.764,565.134C445.42,577.16 447.501,576.185 448.294,575.599C451.645,573.123 454.937,565.342 455.351,564.365C455.879,563.652 456.378,562.89 457.065,562.328C462.802,557.64 460.475,564.321 462.504,571.505L479.093,558.846C498.903,560.847 499.757,563.367 504.239,559.206C507.59,556.095 504.503,554.294 507.9,551.431C508.307,551.25 508.846,551.13 509.565,551.09C516.694,552.162 511.881,558.477 518.812,560.793C522.12,561.899 519.934,559.05 516.355,543.869C517.838,544.516 532.682,550.996 536.064,548.456C540.968,544.774 535.127,544.773 519.759,535.734C527.639,531.906 536.252,529.704 544.075,525.763C544.648,525.475 548.607,523.481 547.893,518.711C549.098,519.039 550.61,519.405 551.641,518.699C553.713,517.279 554.345,514.291 556.417,512.871L545.489,505.247C555.869,504.974 565.78,510.497 559.312,502.268C549.797,490.164 549.117,490.169 549.717,488.983L549.723,489.641C549.156,491.33 550.51,485.408 552.222,484.916C559.05,482.953 566.74,485.21 573.432,482.826C575.183,482.202 572.725,478.829 573.718,477.259C556.984,474.134 548.784,476.994 554.121,469.41C556.369,466.217 559.227,463.495 561.627,460.415C567.451,452.937 557.919,457.468 549.327,453.384Z" style="fill:rgb(51,190,242);fill-rule:nonzero;"/></g></svg>');
}

.cm-game {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cm-score {
    font-weight: bold;
    margin: 20px;
}

.cm-beakers {
    display: flex;
    gap: 40px;
    margin-bottom: 30px;
}

.cm-box {
    text-align: center;
    max-width: 500px;
}

.cm-liquid {
    width: 200px;
    aspect-ratio: 1;
    margin-top: 10px;
    display: flex;
    align-items: flex-end;
    background-color: #fff;
    -webkit-mask: var(--cm-shape) center / contain no-repeat;
    mask: var(--cm-shape) center / contain no-repeat;
}

.cm-btns {
    display: flex;
    gap: 15px;
}

.cm-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;

    -webkit-mask: var(--cm-shape) center / contain no-repeat;
    mask: var(--cm-shape) center / contain no-repeat;
}

.cm-btn:active {
    transform: scale(0.9);
}