/* Bubbly chrome. Tokens come from design-system.css. No universal reset:
   lobby and game pages already set their own box model. */

:root {
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .3  0 0 0 0 .15  0 0 0 .55 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  --paper: var(--grain), linear-gradient(180deg, var(--cream-0) 0%, var(--cream-50) 45%, var(--cream-100) 100%);
  --paper-glass: var(--grain), linear-gradient(180deg, rgba(255,253,246,0.80), rgba(252,237,203,0.72));
}

.bubbly-panel,
.campaign-card {
  position: relative;
  border-radius: var(--radius-dialog);
  border: var(--outline-width) solid var(--cream-300);
  background: var(--paper);
  background-blend-mode: multiply, normal;
  background-size: 160px 160px, auto;
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,0.95),
    inset 0 -8px 14px -6px rgba(212,160,96,0.35),
    0 var(--lip-panel) 0 var(--cream-400),
    0 var(--panel-shadow-offset-y) var(--panel-shadow-blur) var(--warm-shadow);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: var(--font-body-weight);
}

.campaign-card.glass,
.bubbly-panel.glass {
  background: var(--paper-glass);
  background-blend-mode: multiply, normal;
  backdrop-filter: blur(var(--toolbar-glass-blur)) saturate(1.35);
  -webkit-backdrop-filter: blur(var(--toolbar-glass-blur)) saturate(1.35);
}

.bubbly-inset {
  border-radius: var(--radius-tile);
  background: linear-gradient(180deg, var(--cream-200), var(--cream-100));
  box-shadow: inset 0 3px 6px rgba(150,100,50,0.28), inset 0 -2px 0 rgba(255,255,255,0.7);
}

.h-display { font-family: var(--font-display); font-weight: var(--font-hero-weight); font-size: var(--type-hero); line-height: 1.05; color: var(--ink); }
.h-title { font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: 30px; line-height: 1.1; color: var(--ink); }
.h-section { font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: var(--type-section); color: var(--ink-soft); }
.t-body { font-family: var(--font-ui); font-size: var(--type-body); line-height: 1.45; color: var(--ink-soft); font-weight: var(--font-body-weight); }
.t-small { font-family: var(--font-ui); font-size: var(--type-small); color: var(--ink-mute); font-weight: var(--font-body-weight); }

.bubbly-btn {
  --l: var(--lily-300);
  --b: var(--lily-500);
  --d: var(--lily-600);
  --e: var(--lily-700);
  --lip: var(--lily-800);
  --tx: #fff;
  --ts: var(--lily-800);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: var(--type-button);
  color: var(--tx);
  text-shadow: 0 2px 0 var(--ts);
  padding: 13px 30px 15px;
  border-radius: var(--radius-pill);
  border: var(--outline-width) solid var(--e);
  background: linear-gradient(180deg, var(--l) 0%, var(--b) 52%, var(--d) 100%);
  box-shadow:
    inset 0 calc(var(--lip-button) * -1) 0 rgba(0,0,0,0.10),
    inset 0 2px 0 rgba(255,255,255,0.45),
    0 var(--lip-button) 0 var(--lip),
    0 var(--shadow-warm-offset-y) var(--shadow-warm-blur) var(--warm-shadow);
  cursor: pointer;
}
.bubbly-btn::before {
  content: "";
  position: absolute;
  left: var(--gloss-inset);
  right: var(--gloss-inset);
  top: 4px;
  height: var(--gloss-height-percent);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.08));
  pointer-events: none;
}
.bubbly-btn::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 7px;
  width: var(--sparkle-size);
  height: var(--sparkle-size);
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  pointer-events: none;
}
.bubbly-btn.sun { --l: var(--sun-300); --b: var(--sun-500); --d: var(--sun-600); --e: var(--sun-700); --lip: var(--sun-800); --tx: var(--wood-900); --ts: rgba(255,245,200,0.7); }
.bubbly-btn.berry { --l: var(--berry-300); --b: var(--berry-500); --d: var(--berry-600); --e: var(--berry-700); --lip: var(--berry-800); --ts: var(--berry-800); }
.bubbly-btn.pond { --l: var(--pond-300); --b: var(--pond-500); --d: var(--pond-600); --e: var(--pond-700); --lip: var(--pond-800); --ts: var(--pond-800); }
.bubbly-btn.cream { --l: #fff; --b: var(--cream-50); --d: var(--cream-100); --e: var(--cream-300); --lip: var(--cream-400); --tx: var(--ink-soft); --ts: #fff; text-shadow: none; }

.bubbly-badge {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: var(--outline-width) solid var(--sun-700);
  background: radial-gradient(circle at 35% 28%, #fff 0 12%, var(--sun-100) 30%, var(--sun-300) 100%);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,0.08), 0 var(--lip-badge) 0 var(--sun-700), 0 6px 10px var(--warm-shadow);
  display: grid;
  place-items: center;
}
.bubbly-badge.pond { border-color: var(--pond-700); background: radial-gradient(circle at 35% 28%, #fff 0 12%, var(--pond-100) 30%, var(--pond-300) 100%); box-shadow: inset 0 -4px 0 rgba(0,0,0,0.08), 0 var(--lip-badge) 0 var(--pond-700), 0 6px 10px var(--warm-shadow); }
.bubbly-badge.lily { border-color: var(--lily-700); background: radial-gradient(circle at 35% 28%, #fff 0 12%, var(--lily-100) 30%, var(--lily-300) 100%); box-shadow: inset 0 -4px 0 rgba(0,0,0,0.08), 0 var(--lip-badge) 0 var(--lily-700), 0 6px 10px var(--warm-shadow); }
.bubbly-badge.berry { border-color: var(--berry-700); background: radial-gradient(circle at 35% 28%, #fff 0 12%, var(--berry-100) 30%, var(--berry-300) 100%); }
.bubbly-badge.wood { border-color: var(--wood-700); background: radial-gradient(circle at 35% 28%, #fff 0 12%, var(--wood-100) 30%, var(--wood-300) 100%); }
.bubbly-badge.cream { border-color: var(--cream-400); background: radial-gradient(circle at 35% 28%, #fff 0 12%, #fff 30%, var(--cream-100) 100%); }

.bubbly-meter {
  position: relative;
  height: 16px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--cream-300), var(--cream-200));
  box-shadow: inset 0 3px 4px rgba(120,70,30,0.3);
  overflow: hidden;
  border: 2px solid var(--cream-400);
}
.bubbly-meter > i {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--sun-300), var(--sun-500) 55%, var(--sun-600));
}

/* Campaign pieces for the world map, goal, and win screens. */
.star-badge {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--sun-500);
  filter: drop-shadow(0 2px 0 var(--sun-800));
}
.star-badge.empty { color: var(--cream-300); filter: none; }
.goal-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: var(--type-body);
  font-weight: var(--font-body-weight);
  color: var(--ink-soft);
}
.goal-row .star-badge { flex: none; }
.map-node {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  border-radius: var(--radius-pill);
  border: var(--outline-width) solid var(--cream-300);
  background: var(--paper-glass);
  background-blend-mode: multiply, normal;
  box-shadow: inset 0 2px 0 #fff, 0 4px 0 var(--cream-400), 0 10px 18px var(--warm-shadow);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: 16px;
}
.map-node.current {
  border-color: var(--sun-700);
  background: linear-gradient(180deg, var(--sun-100), #fff 70%);
  box-shadow: inset 0 2px 0 #fff, 0 5px 0 var(--sun-800), 0 12px 18px var(--warm-shadow);
}
.map-node.locked { color: var(--ink-mute); }
.map-node .num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: radial-gradient(circle at 35% 28%, #fff 0 12%, var(--lily-300) 40%, var(--lily-500));
  border: 2px solid var(--lily-700);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .bubbly-btn {
    transition: transform var(--motion-hover-milliseconds) ease-out, filter var(--motion-hover-milliseconds) ease-out;
  }
  .bubbly-btn:hover { transform: translateY(-2px) scale(1.04); }
  .bubbly-btn:hover:not(.sun):not(.cream):not(.berry):not(.pond) { animation: bubbly-wobble 600ms ease-out 1; }
  .bubbly-btn:active {
    transform: translateY(var(--press-drop)) scale(0.96, 0.94);
    transition-duration: var(--motion-press-milliseconds);
  }
}
@keyframes bubbly-wobble {
  0% { rotate: 0deg; }
  35% { rotate: -2deg; }
  70% { rotate: 2deg; }
  100% { rotate: 0deg; }
}
@media (prefers-reduced-motion: reduce) {
  .bubbly-btn,
  .bubbly-btn:hover,
  .bubbly-btn:active,
  .map-node,
  .campaign-card {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* In-game HTML chrome that sits over the canvas. */
#webAppMenu {
  height: auto;
  min-height: 40px;
  padding: 4px;
  border: 3px solid var(--cream-300);
  border-radius: var(--radius-pill);
  background: var(--paper-glass);
  background-blend-mode: multiply, normal;
  backdrop-filter: blur(var(--toolbar-glass-blur)) saturate(1.35);
  -webkit-backdrop-filter: blur(var(--toolbar-glass-blur)) saturate(1.35);
  box-shadow: inset 0 2px 0 #fff, 0 4px 0 var(--cream-400), 0 10px 18px var(--warm-shadow);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
}
.web-menu-root > summary { color: var(--ink-soft); border-radius: var(--radius-pill); height: 32px; }
.web-menu-root > summary:hover,
.web-menu-root > summary:focus-visible,
.web-menu-root[open] > summary { color: var(--wood-900); background: linear-gradient(180deg, #fff, var(--cream-100)); }
.web-menu-popup {
  border: 3px solid var(--cream-300);
  border-radius: 22px;
  background: var(--paper);
  background-blend-mode: multiply, normal;
  color: var(--ink);
  box-shadow: 0 7px 0 var(--cream-400), 0 18px 36px var(--warm-shadow);
}
.web-menu-popup button,
.web-menu-submenu > summary { color: var(--ink); font-family: var(--font-ui); font-size: 16px; font-weight: 700; }
.web-menu-popup button:hover,
.web-menu-popup button:focus-visible,
.web-menu-submenu > summary:hover,
.web-menu-submenu[open] > summary { color: var(--wood-900); background: var(--sun-100); }
.web-menu-popup kbd,
.web-menu-submenu-arrow { color: var(--ink-mute); font-size: 14px; }
#tooltip {
  background: var(--paper);
  background-blend-mode: multiply, normal;
  border: 3px solid var(--cream-300);
  border-radius: 16px;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 6px 0 var(--cream-400), 0 12px 20px var(--warm-shadow);
}
#loading { color: var(--ink); }
#loading h1 { font-family: var(--font-display); color: var(--cream-0); }
#loading .status { font-size: 16px; color: var(--cream-50); }
#loading .bar {
  height: 16px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--cream-400);
  background: linear-gradient(180deg, var(--cream-300), var(--cream-200));
  box-shadow: inset 0 3px 4px rgba(120, 70, 30, 0.3);
}
#loading .bar-fill {
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--lily-300), var(--lily-500) 55%, var(--lily-600));
}

#webAppMenu:focus-within {
  border-color: var(--pond-500);
  box-shadow: inset 0 2px 0 #fff, 0 4px 0 var(--cream-400), 0 0 0 4px rgba(56, 191, 168, 0.28);
}
.web-menu-popup button:disabled,
.web-menu-submenu.disabled > summary { color: var(--ink-mute); }
.web-menu-separator { background: var(--cream-300); }
.web-menu-mark,
.web-menu-submenu-arrow,
.web-menu-popup kbd { color: var(--pond-800); }

#mobileShareButton,
.web-share-actions button,
.web-about-links button {
  border: 3px solid var(--lily-700);
  border-radius: var(--radius-pill);
  color: #fff;
  background: linear-gradient(180deg, var(--lily-300), var(--lily-500) 52%, var(--lily-600));
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.10), inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 4px 0 var(--lily-800);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
}
#webShareSheet,
#shareQrDialog,
#webAboutDialog {
  background: rgba(79, 47, 23, 0.45);
  font-family: var(--font-ui);
}
.web-share-sheet-panel,
.share-qr-panel {
  border: 3px solid var(--cream-300);
  background: linear-gradient(180deg, var(--cream-0), var(--cream-100));
  color: var(--ink);
}
.web-share-sheet-panel {
  border-radius: 28px 28px 0 0;
  box-shadow: inset 0 3px 0 #fff, 0 -6px 0 var(--cream-400);
}
.share-qr-panel {
  border-radius: var(--radius-dialog);
  box-shadow: inset 0 3px 0 #fff, 0 8px 0 var(--cream-400), 0 18px 36px var(--warm-shadow);
}
.web-share-sheet-panel h2,
.share-qr-panel h2,
.web-about-authors {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
}
.web-about-kicker,
.web-about-credit,
#shareQrUrl {
  color: var(--ink-soft);
  font-size: 14px;
  font-family: var(--font-ui);
}
.web-share-cancel,
.share-qr-close {
  border: 3px solid var(--cream-400);
  border-radius: var(--radius-pill);
  color: var(--ink);
  background: linear-gradient(180deg, #fff, var(--cream-100));
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 var(--cream-400);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
}
.share-qr-close {
  width: 44px;
  height: 44px;
  min-height: 44px;
  border-radius: 50%;
}
#shareQrCorner {
  border: 3px solid var(--cream-300);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 253, 246, 0.96), rgba(252, 237, 203, 0.94));
  color: var(--ink);
  box-shadow: 0 4px 0 var(--cream-400), 0 10px 18px var(--warm-shadow);
}
#shareQrCornerTitle { color: var(--ink-soft); }
#shareQrCornerCode { color: var(--pond-800); }
#shareQrCornerClose {
  border: 2px solid var(--cream-400);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
}
.web-game-toast {
  border: 3px solid var(--cream-300);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--cream-0), var(--cream-100));
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 4px 0 var(--cream-400);
}
#reconnectBanner {
  border: 3px solid var(--berry-800);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--berry-300), var(--berry-500) 55%, var(--berry-600));
  color: #fff;
  font-family: var(--font-display);
  font-size: 16px;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.12), inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 4px 0 var(--berry-800);
}
#webLevelBuilder {
  border: 3px solid var(--cream-300);
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, var(--cream-0), var(--cream-100));
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  box-shadow: inset 0 3px 0 #fff, 0 6px 0 var(--cream-400), 0 16px 28px var(--warm-shadow);
}
#webLevelBuilder h2 { color: var(--ink); font-family: var(--font-display); font-size: 19px; }
#webLevelBuilder label,
#webLevelBuilder .builder-status { color: var(--ink-soft); font-size: 14px; }
#webLevelBuilder select,
#webLevelBuilder button {
  border: 2px solid var(--cream-400);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff, var(--cream-100));
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
}
#webLevelBuilder button.active,
#webLevelBuilder button:hover {
  color: var(--wood-900);
  background: linear-gradient(180deg, var(--sun-100), #fff);
  border-color: var(--sun-700);
}