/* V7 — playable demo, boba builder, interactive bubbles. All effects opt-in. */
.v7-demo{background:radial-gradient(ellipse at 50% 10%,#462062,#16112f 70%)}.demo-layout{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(250px,.7fr);gap:24px;align-items:stretch}.demo-board{border:2px solid #67e7f1;background:#100d2c;border-radius:22px;overflow:hidden;box-shadow:0 16px 55px #0008}.demo-hud{display:flex;justify-content:space-between;gap:15px;padding:14px 20px;background:#101b39}.demo-hud>div{display:flex;flex-direction:column;min-width:0}.demo-hud small{font-weight:900;color:#69eaf3;letter-spacing:.12em;font-size:10px}.demo-hud strong{font:800 17px 'Baloo 2';color:#fff}.demo-required{display:flex;justify-content:center;gap:9px;background:#0b1532;padding:8px}.demo-required span{min-width:56px;height:46px;display:flex;align-items:center;justify-content:center;border:1px solid #6ae6ed77;border-radius:8px;color:#7cfbb0;font-weight:900}.demo-required img{height:36px;width:36px;object-fit:contain}.demo-required span.collected{background:#063a36;border-color:#75f3ac}.demo-canvas-wrap{position:relative;aspect-ratio:880/460;overflow:hidden}.demo-canvas-wrap canvas{display:block;width:100%;height:100%;touch-action:none}.demo-overlay{position:absolute;inset:0;background:#0b0c28d9;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:20px}.demo-overlay[hidden]{display:none}.demo-overlay h3{font-size:clamp(25px,3.5vw,46px);color:#ffd064}.demo-overlay p{max-width:450px}.demo-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;background:#0a102b}.demo-controls button{border:1px solid #70e6f1;background:#193551;color:#fff;border-radius:10px;padding:9px 14px;font-weight:900;touch-action:none;user-select:none}.demo-controls button:active{background:#32758a}.demo-controls span{font-size:11px;color:#bbd7e7;text-align:center}.demo-guide{border:1px solid #6b568d;border-radius:22px;padding:25px;background:#291d47}.demo-guide img{height:190px;margin:0 auto;object-fit:contain}.demo-guide h3{color:#ffcf68;font-size:28px;margin:18px 0 8px}.demo-guide p{color:#e2d7ef;font-size:14px}.demo-guide strong{color:#8deef3}.v7-disclaimer{font-size:12px!important;color:#afa4c8!important}
.v7-builder{background:#1c1239}.builder-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:28px}.builder-options,.builder-result{border:1px solid #695185;background:#281b48;border-radius:22px;padding:30px}.builder-options fieldset{border:0;border-bottom:1px solid #ffffff28;padding:0 0 23px;margin:0 0 24px}.builder-options fieldset:last-child{border-bottom:0;margin-bottom:0}.builder-options legend{font:800 21px 'Baloo 2';color:#ffd16b;margin-bottom:12px}.builder-choices{display:flex;gap:9px;flex-wrap:wrap}.builder-choices button{background:#17122e;color:white;border:1px solid #7c6b98;border-radius:12px;padding:10px 13px;display:flex;align-items:center;gap:7px;font-weight:900;font-size:13px}.builder-choices button.active,.builder-choices button:hover{border-color:#74f1f2;background:#164656}.builder-choices img{height:31px;width:31px;object-fit:contain}.builder-result{text-align:center;display:flex;align-items:center;flex-direction:column;justify-content:center}.builder-result h3{font-size:28px;color:#ffd367;margin:12px 0}.builder-result p{color:#ddd5eb}.builder-message{min-height:25px;color:#81f7c2!important;font-weight:900}.drink-preview{height:260px;width:180px;position:relative;margin:0 auto 25px}.drink-straw{position:absolute;width:17px;height:126px;top:1px;left:106px;background:#3adce8;border:3px solid #e3fdff;transform:rotate(14deg);border-radius:5px;z-index:1}.drink-lid{position:absolute;top:65px;left:14px;width:154px;height:45px;background:#f3edffe0;border:4px solid #c8edff;border-radius:70% 70% 20% 20%;z-index:3}.drink-cup{position:absolute;left:25px;top:94px;width:133px;height:158px;clip-path:polygon(0 0,100% 0,86% 100%,14% 100%);background:#f5f3f5a8;border:4px solid #d8f5ff;overflow:hidden}.drink-liquid{position:absolute;inset:0;background:#fa7eaf;opacity:.9}.drink-pearls{position:absolute;bottom:12px;left:14px;right:14px;font-size:26px;color:#352035;line-height:1.2;letter-spacing:4px}
.v7-pop{text-align:center;background:radial-gradient(ellipse at 50% 50%,#153d58,#14112d 65%)}.bubble-play{min-height:220px;display:flex;align-items:center;justify-content:space-evenly;gap:12px;flex-wrap:wrap}.pop-bubble{width:125px;height:125px;border:2px solid #9cf8ffbb;border-radius:50%;background:radial-gradient(circle at 24% 20%,#ffffffa8,#e1a8fa55 35%,#42ccff18 75%);box-shadow:inset -10px -12px 20px #c55dff45,0 0 25px #5cdef65c;display:grid;place-items:center;transition:transform .22s,opacity .3s;cursor:pointer}.pop-bubble:hover{transform:scale(1.08)}.pop-bubble img{width:65px;height:65px;object-fit:contain}.pop-bubble.popped{transform:scale(.15);opacity:0;pointer-events:none}.bubble-counter{color:#8deaf3;font-weight:900}.v7-pop .btn{margin:10px auto}.sfx-toggle{white-space:nowrap}
@media(max-width:950px){.demo-layout,.builder-grid{grid-template-columns:1fr}.demo-guide img{height:130px}.demo-guide{display:grid;grid-template-columns:140px 1fr;gap:0 20px}.demo-guide img{grid-row:span 4}.demo-guide h3{margin:0}.demo-guide p{margin:4px 0}}@media(max-width:700px){.demo-hud{padding:10px;gap:7px}.demo-hud strong{font-size:12px}.demo-hud small{font-size:9px}.demo-controls span{font-size:9px}.demo-controls button{font-size:11px;padding:10px}.demo-guide{display:block}.builder-options,.builder-result{padding:18px}.pop-bubble{width:85px;height:85px}.pop-bubble img{width:48px;height:48px}.nav .sfx-toggle{font-size:10px;padding:5px}.bubble-play{min-height:175px}}@media(prefers-reduced-motion:reduce){.pop-bubble{transition:none}}