:root{
  --initial-material:#B9D9A8;
  --single-final:#F6D98C;
  --compound-final:#F3B4BD;
  --front-nasal:#A7DDD0;
  --back-nasal:#AFC9EF;
  --neutral-material:#E9E4D9;
}

/* Identical neutral watercolor PNG sits between the CSS tint and live DOM text. */
.bubble,
.medial-bubble,
.whole-bubble,
.result-bubble{
  position:relative;
  isolation:isolate;
  overflow:visible;
  background:radial-gradient(circle at 35% 27%,color-mix(in srgb,var(--bubble-tint,var(--neutral-material)),white 72%) 0%,color-mix(in srgb,var(--bubble-tint,var(--neutral-material)),white 30%) 62%,color-mix(in srgb,var(--bubble-tint,var(--neutral-material)),white 12%) 100%);
  border-color:rgba(255,255,255,.88);
  box-shadow:inset 4px 5px 12px rgba(255,255,255,.7),inset -3px -5px 10px rgba(91,91,80,.07),0 5px 12px rgba(93,87,71,.1);
}
.bubble::before,
.medial-bubble::before,
.whole-bubble::before,
.result-bubble::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:url("../../assets/bubble_master.png") center/100% 100% no-repeat;
  opacity:.74;
  mix-blend-mode:soft-light;
  pointer-events:none;
  z-index:0;
}
.bubble::after,
.medial-bubble::after,
.whole-bubble::after,
.result-bubble::after{
  content:"";
  position:absolute;
  left:21%;top:14%;width:23%;height:11%;
  border-radius:50%;
  background:rgba(255,255,255,.72);
  transform:rotate(-32deg);
  pointer-events:none;
  z-index:1;
}
.bubble-glyph{position:relative;z-index:2;line-height:1;color:inherit;text-shadow:0 1px rgba(255,255,255,.42)}
.result-letter{position:relative;z-index:2}
.initial-bubble{--bubble-tint:var(--initial-material);color:#536b4c}
.final-bubble{--bubble-tint:var(--neutral-material);color:#625e52}
.final-bubble[aria-pressed="true"]{box-shadow:0 0 0 4px color-mix(in srgb,var(--bubble-tint),transparent 42%),0 8px 14px rgba(80,80,70,.16)}
.medial-bubble{--bubble-tint:var(--initial-material);color:#607451}
.whole-bubble{--bubble-tint:var(--neutral-material);color:#625e52}
.result-bubble{--bubble-tint:#F6D98C}

/* A keeps the center clear and the rim nearly neutral. */
html[data-bubble-style="transparent"] .bubble,
html[data-bubble-style="transparent"] .medial-bubble,
html[data-bubble-style="transparent"] .whole-bubble{
  background:
    radial-gradient(circle at 50% 48%,transparent 0 43%,color-mix(in srgb,var(--bubble-tint),transparent 89%) 63%,color-mix(in srgb,var(--bubble-tint),transparent 73%) 81%,rgba(255,255,255,.32) 92%,rgba(255,255,255,.52) 98%);
  border-color:rgba(255,255,255,.9);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),0 5px 12px rgba(93,87,71,.09);
}
html[data-bubble-style="transparent"] .bubble::before,
html[data-bubble-style="transparent"] .medial-bubble::before,
html[data-bubble-style="transparent"] .whole-bubble::before{opacity:.18;mix-blend-mode:soft-light}

/* B uses the same PNG and layout, with visible but localized watercolor pigment. */
html[data-bubble-style="watercolor"] .bubble,
html[data-bubble-style="watercolor"] .medial-bubble,
html[data-bubble-style="watercolor"] .whole-bubble{
  background:
    radial-gradient(ellipse at 19% 68%,color-mix(in srgb,var(--bubble-tint),transparent 30%) 0 12%,transparent 49%),
    radial-gradient(ellipse at 83% 35%,color-mix(in srgb,var(--bubble-tint),transparent 42%) 0 10%,transparent 47%),
    radial-gradient(circle at 50% 48%,color-mix(in srgb,var(--bubble-tint),transparent 86%) 0 30%,color-mix(in srgb,var(--bubble-tint),transparent 78%) 52%,color-mix(in srgb,var(--bubble-tint),transparent 66%) 72%,transparent 91%),
    radial-gradient(circle at 50% 50%,transparent 67%,rgba(255,255,255,.24) 76%,color-mix(in srgb,var(--bubble-tint),transparent 44%) 88%,rgba(255,255,255,.22) 97%);
  border-color:color-mix(in srgb,var(--bubble-tint),white 48%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 5px 12px color-mix(in srgb,var(--bubble-tint),transparent 82%);
}
html[data-bubble-style="watercolor"] .bubble::before,
html[data-bubble-style="watercolor"] .medial-bubble::before,
html[data-bubble-style="watercolor"] .whole-bubble::before{opacity:.62;mix-blend-mode:soft-light}
html[data-bubble-style="watercolor"] .bubble[aria-pressed="true"],
html[data-bubble-style="watercolor"] .medial-bubble[aria-pressed="true"],
html[data-bubble-style="watercolor"] .whole-bubble[aria-pressed="true"]{box-shadow:0 0 0 4px color-mix(in srgb,var(--bubble-tint),transparent 42%),inset 0 0 0 1px rgba(255,255,255,.25),0 8px 14px rgba(80,80,70,.17)}

.material-test-switch{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 10px;padding:8px 10px;border:1px solid #eee5d2;border-radius:15px;background:rgba(255,253,248,.85)}
.material-test-switch>div{display:flex;flex-direction:column;min-width:130px;margin-right:auto;color:#6e785d}
.material-test-switch strong{font-size:11px}.material-test-switch small,.layout-note{color:#998f7d;font-size:9px;font-weight:700}
.material-test-switch button{min-height:38px;padding:0 11px;border:1px solid #e8dfcd;border-radius:11px;background:#fffdf8;color:#82765f;font-size:10px;font-weight:900;cursor:pointer;touch-action:manipulation}
.material-test-switch button.active{border-color:#c7d8b7;background:#eaf1e2;color:#607851}
.layout-note{flex-basis:100%;text-align:right}

body[data-space-layout="B"] .initial-category-host{display:block;margin:4px 0 0;padding:8px 7px 7px;border-top:1px solid #e4dccb;border-radius:12px;background:linear-gradient(145deg,rgba(248,246,235,.8),rgba(255,253,248,.72))}
body[data-space-layout="B"] .initial-category-host .category-tabs{justify-content:flex-start;margin-top:0;gap:4px}
body[data-space-layout="B"] .initial-category-host .category-tab{min-height:34px;padding:0 6px;font-size:8px}
body[data-space-layout="B"] .final-tray>.category-tabs{display:none}
@media(max-width:700px){
  .material-test-switch{gap:5px;padding:7px}
  .material-test-switch>div{min-width:100%;margin:0 0 2px}
  .material-test-switch button{flex:1;min-height:40px;padding:0 7px;font-size:9px}
  .layout-note{flex-basis:100%;text-align:left}
  body[data-space-layout="B"] .initial-category-host{padding:7px 5px 6px}
  body[data-space-layout="B"] .initial-category-host .category-tabs{width:100%;flex-wrap:wrap;overflow:visible;gap:4px}
  body[data-space-layout="B"] .initial-category-host .category-tab{min-width:48px;min-height:40px;padding:0 5px;font-size:8px}
  body[data-space-layout="B"] .final-list{grid-template-columns:repeat(3,48px);justify-content:center;gap:7px 3px;padding:4px 0 2px}
  body[data-space-layout="B"] .final-bubble{width:48px;height:48px;min-width:48px;min-height:48px}
  body[data-space-layout="B"] .final-bubble[aria-pressed="true"]{transform:scale(1.04)}
}
@media(max-width:365px){body[data-space-layout="B"] .final-list{grid-template-columns:repeat(2,48px);gap:6px 8px}}