/* ============================================================
   WORD LAB — builder.css (v2)
   Big open sandbox on the left; a metallic vertical piece rack
   on the right (Mega Man Legends-style hardware panel). Vivid,
   warm brick colors are the one thing allowed to be loud against
   all the brushed-metal and neutral chrome.
   ============================================================ */

/* Guarantees the `hidden` attribute always wins over a class's own
   `display` property. Without this, any element with both `hidden` and
   a class-based `display: flex`/etc. can silently stay visible, since
   the two rules have equal specificity and source order decides —
   which was breaking wl-clue-card, wl-reveal, and wl-related. */
[hidden] {
  display: none !important;
}

:root {
  --wl-prefix: #FF7A45;
  --wl-prefix-light: #FFA36E;
  --wl-prefix-dark: #D85A2A;
  --wl-root: #4CAEEF;
  --wl-root-light: #82CBF7;
  --wl-root-dark: #2A82C4;
  --wl-suffix: #FFC13D;
  --wl-suffix-light: #FFD873;
  --wl-suffix-dark: #D9971A;
  --wl-connector: #8FE0C4;
  --wl-connector-dark: #4FBF98;
  --wl-connector-text: #0F5C42;
  --wl-skip: #5ECB86;
  --wl-board-bg: #ffffff;
  --wl-board-border: #E2E2E2;

  --wl-metal-1: #eceef1;
  --wl-metal-2: #d7dade;
  --wl-metal-3: #c3c7cc;
  --wl-metal-edge: #aeb2b8;
  --wl-metal-text: #3a3f47;
}

.wl-wrapper {
  max-width: 1080px;
  margin: 0 auto;
  padding: 78px 24px 40px;
  font-family: 'Nunito', var(--skin-font, Arial, sans-serif);
}

/* ---- Quote banner: white matches the board's own surface, so it
   blends in both modes (cream only had a partner in guided mode) —
   typography carries the personality instead of the background ---- */
.wl-quote-ticker {
  background: var(--wl-board-bg);
  border: 0.5px solid var(--wl-board-border);
  border-radius: 16px;
  padding: 10px 20px;
  margin-bottom: 12px;
  text-align: center;
  opacity: 0;
  transform: translateY(-6px);
  animation: wlQuoteIn .5s .1s ease-out forwards;
}

@keyframes wlQuoteIn {
  to { opacity: 1; transform: translateY(0); }
}

.wl-quote-ticker-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 66px;
}

.wl-quote-ticker-text {
  margin: 0;
  font-family: 'Nunito', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .015em;
  color: #7A7368;
  transition: opacity .5s ease;
}
.wl-quote-ticker-text strong {
  display: inline-block;
  font-family: 'Quicksand', 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
  color: #33261C;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .06);
  opacity: 0;
  transform: scale(.85);
  animation: wlQuotePunchIn .45s .55s cubic-bezier(.34,1.56,.64,1) forwards;
}

@keyframes wlQuotePunchIn {
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 640px) {
  .wl-quote-ticker { padding: 8px 14px; margin-bottom: 8px; }
  .wl-quote-ticker-frame { min-height: 100px; }
  .wl-quote-ticker-text { font-size: 12px; }
  .wl-quote-ticker-text strong { font-size: 13px; }
}

/* ---- Header / title lockup ---- */
.wl-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 22px;
}

.wl-title-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
}

.wl-title-mark {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  overflow: visible;
}

.wl-mark-bar {
  transform-origin: center;
  animation: wlMarkIn .5s cubic-bezier(.2,.9,.3,1.2) backwards;
}

@keyframes wlMarkIn {
  from { transform: translateY(-14px) scale(.7); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.wl-title {
  font-size: 29px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.015em;
  color: var(--skin-primary, #007acc);
  animation: wlTitleIn .5s .2s ease-out backwards;
}

.wl-subtitle {
  margin: 3px 0 0;
  color: #6b6b6b;
  font-size: 13.5px;
  animation: wlTitleIn .5s .28s ease-out backwards;
}

@keyframes wlTitleIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Mode toggle ---- */
.wl-mode-toggle {
  display: inline-flex;
  background: #EFEFEF;
  border-radius: 20px;
  padding: 3px;
}

.wl-mode-btn {
  border: none;
  background: transparent;
  padding: 8px 18px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
  color: #6b6b6b;
  cursor: pointer;
  font-family: inherit;
  transition: background .18s ease, color .18s ease;
}

.wl-mode-btn.is-active {
  background: var(--skin-primary, #007acc);
  color: #fff;
}

/* ---- Two-column layout ---- */
.wl-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
}

.wl-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- Guided-mode clue card ---- */
.wl-clue-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #FFF8EE;
  border-radius: 16px;
  padding: 18px 20px;
  animation: wlSlideDown .35s cubic-bezier(.2,.8,.3,1);
}

@keyframes wlSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.wl-clue-avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.wl-clue-avatar.wl-happy {
  animation: wlAvatarBounce .55s cubic-bezier(.34,1.56,.64,1);
}
@keyframes wlAvatarBounce {
  0% { transform: translateY(0) rotate(0); }
  30% { transform: translateY(-7px) rotate(-6deg); }
  60% { transform: translateY(0) rotate(4deg); }
  100% { transform: translateY(0) rotate(0); }
}

.wl-clue-body {
  min-width: 0;
  flex: 1;
}

.wl-clue-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.wl-clue-eyebrow {
  margin: 0;
  font-family: 'Quicksand', 'Nunito', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: #8A7860;
  background: #F0E8DA;
  padding: 3px 10px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.wl-xp-level-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
  background: #D2F0E1;
  padding: 3px 10px 4px;
  border-radius: 10px;
}
.wl-xp-level-badge.wl-pop {
  animation: wlBadgePop .45s cubic-bezier(.34,1.56,.64,1);
}
.wl-xp-level-badge.wl-trial-ready {
  background: #FFE3A8;
}
.wl-xp-level-badge.wl-trial-ready .wl-xp-rank-title,
.wl-xp-level-badge.wl-trial-ready .wl-xp-level-num {
  color: #7A4B00;
}

.wl-xp-rank-title {
  font-family: 'Quicksand', 'Nunito', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  color: #3F9C7C;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}

.wl-xp-level-num {
  font-family: 'Quicksand', 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #0F6E56;
  white-space: nowrap;
}

.wl-xp-bar-track {
  height: 6px;
  background: #F0E8DA;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.wl-xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4FBF98, #4CAEEF);
  border-radius: 4px;
  transition: width .4s cubic-bezier(.2,.8,.3,1);
}
.wl-xp-bar-fill.wl-trial-ready {
  background: linear-gradient(90deg, #FFA23D, #FF7A45);
}

/* Scrolling dialogue log — new lines slide/fade in and the log
   auto-scrolls to the newest one, like a visual-novel text box.
   Deliberately NOT a character-by-character typewriter (that's used
   elsewhere on the site) — this is a running log instead. */
.wl-dialogue-log {
  max-height: 130px;
  overflow-y: auto;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}

.wl-dialogue-line {
  margin: 0;
  animation: wlDialogueIn .35s cubic-bezier(.2,.8,.3,1) backwards;
}

/* Structured opener: a quiet frame, a readable clue, an energetic ask —
   three distinct visual weights instead of one dense bold paragraph. */
.wl-dialogue-frame {
  display: block;
  font-family: 'Quicksand', 'Nunito', sans-serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 600;
  color: #A98A63;
  margin-bottom: 3px;
}

.wl-dialogue-content {
  display: block;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #4A3826;
  line-height: 1.45;
}

.wl-dialogue-question {
  display: block;
  font-family: 'Quicksand', 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #E67A3D;
  margin-top: 4px;
}

.wl-dialogue-line.wl-dialogue-hint {
  font-family: 'Nunito', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #5C4A34;
  padding: 8px 12px;
  background: #ffffff;
  border-radius: 10px;
  border-left: 3px solid #FF9E6D;
  line-height: 1.4;
}

.wl-dialogue-line.wl-dialogue-success {
  font-family: 'Nunito', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #0F6E56;
  background: #E4F7ED;
  padding: 8px 12px;
  border-radius: 10px;
}

@keyframes wlDialogueIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Guided-mode scoring animations ---- */
.wl-point-pop {
  position: absolute;
  right: 18px;
  top: 10px;
  font-size: 17px;
  font-weight: 800;
  color: #2FAE6B;
  pointer-events: none;
  animation: wlPointPop 1s cubic-bezier(.2,.7,.3,1) forwards;
  z-index: 5;
}

@keyframes wlPointPop {
  0% { opacity: 0; transform: translate(0, 6px) scale(.8); }
  20% { opacity: 1; transform: translate(0, 0) scale(1.15); }
  100% { opacity: 0; transform: translate(22px, -34px) scale(1); }
}

.wl-ship-stamp {
  position: absolute;
  left: 14px;
  top: -10px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #FFF3DD;
  border: 2px dashed #E6A82A;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #B4790C;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
  text-align: center;
  line-height: 1.1;
  transform: rotate(-14deg) scale(0);
  animation: wlStampIn .5s cubic-bezier(.34,1.56,.64,1) forwards, wlStampOut .3s .5s ease-in forwards;
  z-index: 6;
}

@keyframes wlStampIn {
  0% { transform: rotate(-14deg) scale(0); opacity: 0; }
  60% { transform: rotate(-14deg) scale(1.15); opacity: 1; }
  100% { transform: rotate(-14deg) scale(1); opacity: 1; }
}
@keyframes wlStampOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.wl-clue-actions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
}

.wl-hint-btn {
  border: none;
  background: #FF7A45;
  color: #fff;
  font-family: 'Quicksand', 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 15px;
  border-radius: 14px;
  cursor: pointer;
  transition: transform .12s ease, background .2s ease, color .2s ease;
}
.wl-hint-btn:hover { transform: translateY(-1px); }
.wl-hint-btn:active { transform: translateY(1px) scale(.94); }
.wl-hint-btn.wl-pressed {
  animation: wlHintPress .32s cubic-bezier(.34,1.56,.64,1);
}
@keyframes wlHintPress {
  0% { transform: scale(1); }
  35% { transform: scale(.86) rotate(-2deg); }
  70% { transform: scale(1.08) rotate(1deg); }
  100% { transform: scale(1) rotate(0); }
}

.wl-skip-btn {
  border: 0.5px solid #E8DAC5;
  background: #FFFCF6;
  color: #9A8467;
  font-family: 'Quicksand', 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 15px;
  border-radius: 14px;
  cursor: pointer;
  transition: transform .12s ease;
}
.wl-skip-btn:hover { transform: translateY(-1px); }

/* ---- Big sandbox board ---- */
.wl-board {
  position: relative;
  background: var(--wl-board-bg);
  border: 0.5px solid var(--wl-board-border);
  border-radius: 16px;
  padding: 26px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  background-image:
    radial-gradient(circle, #eef0f2 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -4px -4px;
}

.wl-board-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
}
.wl-board-watermark img {
  width: 130px;
  height: auto;
  opacity: 0.045;
}

.wl-quote-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 44px;
  pointer-events: none;
  z-index: 0;
}

.wl-quote-bg-text {
  margin: 0;
  max-width: 480px;
  font-family: 'Nunito', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.65;
  color: #4A3826;
  opacity: 0.07;
  text-align: center;
  animation: wlQuoteBreathe 9s ease-in-out infinite;
}

@keyframes wlQuoteBreathe {
  0%, 100% { opacity: 0.055; transform: scale(1); }
  50% { opacity: 0.12; transform: scale(1.015); }
}

.wl-board-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.wl-board-label {
  font-size: 12px;
  font-weight: 600;
  color: #8A8A8A;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-right: auto;
}

.wl-discovered-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #FFF3DD;
  color: #B4790C;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
}

.wl-discovered-badge svg { flex-shrink: 0; }

.wl-discovered-badge.wl-pop {
  animation: wlBadgePop .45s cubic-bezier(.34,1.56,.64,1);
}

@keyframes wlBadgePop {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); background: #FFE1A3; }
  100% { transform: scale(1); }
}

.wl-clear-btn {
  border: none;
  background: none;
  color: #8A8A8A;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.wl-clear-btn:hover { color: #444; }

.wl-board-track {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  flex: 1;
  align-content: center;
  min-height: 90px;
  row-gap: 14px;
}

.wl-board-hint {
  width: 100%;
  text-align: center;
  font-size: 13px;
  color: #9a9a9a;
  margin: 0 0 10px;
}

.wl-board-slot {
  width: 78px;
  height: 52px;
  border: 2px dashed #D8D8D8;
  border-radius: 9px;
  margin-left: 8px;
  flex-shrink: 0;
}

/* ---- Reveal card ---- */
.wl-reveal {
  display: flex;
  gap: 14px;
  align-items: center;
  background: linear-gradient(135deg, #F7FAFD 0%, #EFF6FC 100%);
  border-radius: 14px;
  padding: 18px 20px;
  animation: wlRevealIn .5s cubic-bezier(.22,1.2,.4,1) backwards;
  position: relative;
  overflow: visible;
}

@keyframes wlRevealIn {
  from { transform: translateY(12px) scale(.97); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.wl-reveal-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #E6F1FB;
  color: var(--skin-primary, #007acc);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: wlBreathe 2.4s ease-in-out infinite;
}

@keyframes wlBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.wl-reveal-word {
  position: relative;
  margin: 0 0 3px;
  font-weight: 700;
  font-size: 19px;
  color: var(--skin-text, #1a1a1a);
  text-transform: lowercase;
  border: none;
  background: none;
  padding: 0 0 0 4px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  display: inline-block;
  transition: color .15s ease, transform .15s ease, text-shadow .2s ease, padding .2s cubic-bezier(.34,1.56,.64,1);
}
.wl-reveal-word::after {
  content: "";
  position: absolute;
  left: 4px;
  bottom: -2px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #007acc;
  transition: width .3s cubic-bezier(.2,.8,.3,1);
}
.wl-reveal-word::before {
  content: "\2192";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translate(-6px, -50%) rotate(-15deg) scale(.5);
  opacity: 0;
  color: #007acc;
  font-weight: 800;
  transition: opacity .25s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.wl-reveal-word:hover {
  color: #007acc;
  transform: translateY(-1px);
  text-shadow: 0 0 14px rgba(0,122,204,.3);
  padding-left: 18px;
}
.wl-reveal-word:hover::after {
  width: calc(100% - 4px);
}
.wl-reveal-word:hover::before {
  opacity: 1;
  transform: translate(0, -50%) rotate(0) scale(1);
}

.wl-reveal-meaning {
  margin: 0;
  font-size: 13.5px;
  color: #6b6b6b;
}

.wl-reveal-body { flex: 1; min-width: 0; }

.wl-related {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  background: #FFF3E1;
  border-radius: 12px;
  border: 1.5px dashed #FFC98A;
  animation: wlSlideDown .3s .1s ease-out backwards;
}

.wl-related-label {
  font-family: 'Quicksand', 'Nunito', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: #B4790C;
  width: 100%;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.wl-related-label::before {
  content: "\2728 ";
}

.wl-related-chip {
  border: none;
  background: #fff;
  color: #E67A3D;
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: 14px;
  cursor: pointer;
  font-family: 'Quicksand', 'Nunito', sans-serif;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.wl-related-chip:hover {
  background: #FFEAD2;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,.14);
}

/* Confetti burst */
.wl-confetti-piece {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  top: 50%;
  left: 22px;
  pointer-events: none;
  animation: wlConfetti .7s ease-out forwards;
}

@keyframes wlConfetti {
  to {
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
    opacity: 0;
  }
}

.wl-show-all {
  text-align: center;
  font-size: 12px;
  color: var(--skin-primary, #007acc);
  cursor: pointer;
  margin: 0;
  text-decoration: underline;
}

.wl-mobile-tabs {
  display: none;
  gap: 7px;
  margin-bottom: 12px;
}

.wl-mobile-tab {
  flex: 1;
  border: none;
  background: rgba(255,255,255,.65);
  color: var(--wl-metal-text);
  font-family: 'Quicksand', 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 9px 4px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.wl-mobile-tab:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.9);
}

.wl-mobile-tab.is-active[data-category="prefix"] { background: var(--wl-prefix); color: #fff; box-shadow: 0 2px 8px rgba(255,122,69,.35); }
.wl-mobile-tab.is-active[data-category="root"] { background: var(--wl-root); color: #fff; box-shadow: 0 2px 8px rgba(76,174,239,.35); }
.wl-mobile-tab.is-active[data-category="connector"] { background: var(--wl-connector-dark); color: #fff; box-shadow: 0 2px 8px rgba(79,191,152,.35); }
.wl-mobile-tab.is-active[data-category="suffix"] { background: var(--wl-suffix); color: #5C3A00; box-shadow: 0 2px 8px rgba(255,193,61,.35); }

/* ---- Metallic vertical rail rack ---- */
.wl-rail-panel {
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.35) 0 2px, transparent 2px 6px),
    linear-gradient(160deg, var(--wl-metal-1) 0%, var(--wl-metal-2) 55%, var(--wl-metal-3) 100%);
  border: 1px solid var(--wl-metal-edge);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -2px 4px rgba(0,0,0,.06);
  position: relative;
}

/* corner rivets, like a hardware panel */
.wl-rail-panel::before,
.wl-rail-panel::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--wl-metal-edge) 75%);
}
.wl-rail-panel::before { left: 10px; }
.wl-rail-panel::after { right: 10px; }

.wl-rail {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 12px;
  padding: 12px;
  transition: background .15s ease, box-shadow .15s ease;
}

.wl-rail.is-narrowed {
  background: #eaf3fb;
  box-shadow: inset 0 0 0 1px #bcdcf4;
}

.wl-rail.is-almost {
  animation: wlAlmostPulse 1.1s ease-in-out infinite;
}

@keyframes wlAlmostPulse {
  0%, 100% { box-shadow: inset 0 0 0 1px #bcdcf4; }
  50% { box-shadow: inset 0 0 0 2px #5ECB86, 0 0 0 3px rgba(94,203,134,.15); }
}

.wl-rail-connector { padding-bottom: 10px; }

.wl-rail-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 9px;
}

.wl-rail-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--wl-metal-text);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.wl-rail-note {
  font-size: 10.5px;
  color: #5f656d;
  font-weight: 500;
}

.wl-rail-search {
  width: 100%;
  box-sizing: border-box;
  border: 0.5px solid #d5d8dc;
  background: #fff;
  border-radius: 7px;
  padding: 7px 9px;
  font-size: 12px;
  font-family: inherit;
  margin-bottom: 10px;
}

.wl-rail-strip {
  display: flex;
  flex-direction: row;
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  padding-bottom: 2px;
}

.wl-rail-arrows {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}

.wl-rail-arrow {
  flex: 1;
  height: 24px;
  border-radius: 6px;
  background: var(--skin-primary, #007acc);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity .12s ease, transform .1s ease;
}
.wl-rail-arrow:hover { opacity: 1; }
.wl-rail-arrow:active { transform: scale(.94); }
.wl-rail-arrow svg { transform: rotate(-90deg); }

/* ---- Bricks ---- */
.wl-brick {
  position: relative;
  padding: 9px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  cursor: pointer;
  border-top: 3px solid;
  border-left: 3px solid;
  border-bottom: 3px solid;
  border-right: 3px solid;
  transition: transform .12s ease, box-shadow .12s ease;
  font-family: inherit;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

.wl-rail-strip .wl-brick { width: auto; flex-shrink: 0; }
.wl-board-track .wl-brick { width: auto; }

.wl-brick:hover { transform: translateX(2px); }
.wl-brick:active { transform: translateX(0) scale(.97); }
.wl-board-track .wl-brick:hover { transform: translateY(-2px); }

.wl-brick::before,
.wl-brick::after {
  content: "";
  position: absolute;
  top: -6px;
  width: 8px;
  height: 6px;
  border-radius: 3px 3px 0 0;
}
.wl-brick::before { left: 10px; }
.wl-brick::after { right: 10px; }

.wl-brick[data-tip]:hover::after,
.wl-brick[data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  background: #16222f;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 5px 9px;
  border-radius: 6px;
  width: max-content;
  max-width: 180px;
  text-align: center;
  line-height: 1.35;
  z-index: 20;
  pointer-events: none;
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
  animation: wlTipIn .12s ease-out;
  top: auto;
  right: auto;
  height: auto;
  border-radius: 6px;
}

@keyframes wlTipIn {
  from { opacity: 0; transform: translateX(-50%) translateY(3px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.wl-brick[data-category="prefix"] { background: var(--wl-prefix); border-color: var(--wl-prefix-light) var(--wl-prefix-dark) var(--wl-prefix-dark) var(--wl-prefix-light); }
.wl-brick[data-category="prefix"]::before, .wl-brick[data-category="prefix"]::after { background: var(--wl-prefix-light); }

.wl-brick[data-category="root"] { background: var(--wl-root); border-color: var(--wl-root-light) var(--wl-root-dark) var(--wl-root-dark) var(--wl-root-light); }
.wl-brick[data-category="root"]::before, .wl-brick[data-category="root"]::after { background: var(--wl-root-light); }

.wl-brick[data-category="suffix"] { background: var(--wl-suffix); border-color: var(--wl-suffix-light) var(--wl-suffix-dark) var(--wl-suffix-dark) var(--wl-suffix-light); }
.wl-brick[data-category="suffix"]::before, .wl-brick[data-category="suffix"]::after { background: var(--wl-suffix-light); }

.wl-brick.wl-connector {
  border-radius: 50%;
  width: 30px !important;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wl-connector);
  border: 3px solid var(--wl-connector-dark);
  color: var(--wl-connector-text);
  font-size: 12px;
}
.wl-brick.wl-connector::before, .wl-brick.wl-connector::after { display: none; }
.wl-rail-strip .wl-brick.wl-connector { align-self: flex-start; }

.wl-placed-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.wl-category-label {
  font-family: 'Quicksand', 'Nunito', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  color: #9A8467;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.wl-brick.is-placed {
  width: auto;
  position: relative;
}

.wl-brick.is-placed:has(.wl-remove) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.wl-remove {
  font-size: 13px;
  line-height: 1;
  opacity: 0.85;
}

.wl-learn-more {
  position: absolute;
  bottom: -7px;
  right: -7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  color: #007acc;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  z-index: 2;
  transition: transform .15s ease;
  animation: wlLearnMoreFlash 2.6s ease-in-out infinite;
}
.wl-learn-more:hover {
  transform: scale(1.18);
}
@keyframes wlLearnMoreFlash {
  0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,.2), 0 0 0 0 rgba(0,122,204,.45); }
  60% { box-shadow: 0 2px 6px rgba(0,0,0,.2), 0 0 0 6px rgba(0,122,204,0); }
}

.wl-brick.wl-decoy-wrong {
  animation: wlWobble .35s ease;
}

.wl-skip-spark {
  width: 16px;
  height: 4px;
  margin: 0 -1px;
  background: repeating-linear-gradient(90deg, var(--wl-skip) 0 4px, transparent 4px 8px);
  animation: wlPulse 1.2s ease-in-out infinite;
  align-self: center;
}

@keyframes wlPulse {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}

@keyframes wlWobble {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

@keyframes wlDrop {
  from { transform: translateY(-16px) scale(.9); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.wl-brick.wl-just-placed {
  animation: wlDrop .35s ease-out;
}

/* ---- Mobile: a fundamentally different architecture, not just a
   squeezed desktop layout.

   1. Header is drastically compacted — the logo/title were eating
      ~190px of a ~700px viewport before any real content appeared.
   2. The board is small and STICKY at the top, so your current word
      and the reveal card are always visible no matter how far you
      scroll through pieces — this is the actual fix for "the sandbox
      and piece selection are so far apart".
   3. Only ONE piece category shows at a time via tabs, instead of
      four stacked rails you have to scroll past to find the one you
      want. Placing a piece auto-advances to the next tab.
   ---- */
@media (max-width: 860px) {
  /* The hamburger already provides Home navigation — the logo here was
     pure duplicated real estate on a page this space-constrained. */
  .logo-mobile,
  .logo-desktop {
    display: none;
  }

  .wl-wrapper {
    padding-top: 62px; /* just enough to clear the fixed burger-btn (top:16px + 38px tall) */
  }

  .wl-header {
    margin-bottom: 12px;
    align-items: center;
  }
  .wl-title-mark {
    width: 28px;
    height: 28px;
  }
  .wl-title {
    font-size: 19px;
  }
  .wl-subtitle {
    display: none;
  }
  .wl-mode-toggle {
    transform: scale(.9);
    transform-origin: right center;
  }

  .wl-layout {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Compact sticky board — the "always visible" anchor */
  .wl-main {
    gap: 8px;
  }
  .wl-board {
    position: sticky;
    top: 58px;
    z-index: 30;
    min-height: 0;
    padding: 10px 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
  }
  .wl-board-header {
    margin-bottom: 6px;
  }
  .wl-board-track {
    min-height: 46px;
    row-gap: 8px;
  }
  .wl-board-hint {
    font-size: 11.5px;
    margin-bottom: 4px;
  }
  .wl-reveal {
    padding: 10px 14px;
  }

  /* Category tabs replace four stacked rails — mobile-only, since
     desktop already shows all four rails at once and the tabs would
     just be inert clutter there. */
  .wl-mobile-tabs {
    display: flex;
  }


  .wl-rail-panel {
    flex-direction: column;
    padding: 10px;
  }
  .wl-rail {
    display: none;
  }
  .wl-rail.is-tab-active {
    display: block;
  }

  .wl-rail-strip {
    flex-direction: row;
    flex-wrap: wrap;
    max-height: 168px;
    overflow-x: hidden;
    overflow-y: auto;
    align-content: flex-start;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent 100%);
  }
  .wl-rail-strip .wl-brick {
    width: auto;
  }
  .wl-rail-arrows {
    display: none;
  }
}

@media (max-width: 640px) {
  .wl-wrapper { padding: 14px 12px 40px; }
  .wl-board { padding: 8px 12px; }
}


/* ============================================================
   WELCOME TOUR — one-time walkthrough from Brix
   ============================================================ */
.wl-tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
}

.wl-tour-spotlight {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 14px;
  border: 3px solid #FF7A45;
  box-shadow: 0 0 0 9999px rgba(20, 14, 8, .42), 0 0 24px rgba(255, 122, 69, .55);
  transition: top .5s cubic-bezier(.2,.8,.3,1), left .5s cubic-bezier(.2,.8,.3,1),
              width .5s cubic-bezier(.2,.8,.3,1), height .5s cubic-bezier(.2,.8,.3,1),
              opacity .3s ease;
  pointer-events: none;
}
.wl-tour-spotlight.is-dim {
  border-color: transparent;
  box-shadow: 0 0 0 9999px rgba(20, 14, 8, .42);
}

.wl-tour-card {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  max-width: 380px;
  width: calc(100% - 48px);
  background: #FFF8EE;
  border-radius: 20px;
  padding: 24px 26px 20px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  animation: wlDialogueIn .35s ease-out;
  pointer-events: auto;
}

.wl-tour-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.wl-tour-step-label {
  margin: 0 0 8px;
  font-family: 'Quicksand', 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #B4790C;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.wl-tour-text {
  margin: 0 0 16px;
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  color: #4A3826;
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wl-tour-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 18px;
}

.wl-tour-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #E8DAC5;
  transition: background .2s ease, transform .2s ease;
}
.wl-tour-dot.is-active {
  background: #FF7A45;
  transform: scale(1.3);
}

.wl-tour-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.wl-tour-skip {
  border: 0.5px solid #E8DAC5;
  background: #FFFCF6;
  color: #9A8467;
  font-family: 'Quicksand', 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 14px;
  cursor: pointer;
  transition: transform .12s ease;
}
.wl-tour-skip:hover { transform: translateY(-1px); }

.wl-tour-back {
  border: 0.5px solid #E8DAC5;
  background: #FFFCF6;
  color: #9A8467;
  font-family: 'Quicksand', 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 14px;
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
}
.wl-tour-back:hover { transform: translateY(-1px); }
.wl-tour-back:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.wl-tour-next {
  border: none;
  background: #FF7A45;
  color: #fff;
  font-family: 'Quicksand', 'Nunito', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 14px;
  cursor: pointer;
  transition: transform .12s ease;
}
.wl-tour-next:hover { transform: translateY(-1px); }
.wl-tour-next:active { transform: translateY(1px) scale(.96); }

@media (max-width: 640px) {
  .wl-tour-card {
    padding: 12px 14px 10px;
    max-height: 35vh;
    overflow-y: auto;
    bottom: 10px;
  }
  .wl-tour-avatar { margin-bottom: 4px; }
  .wl-tour-avatar img { width: 28px !important; }
  .wl-tour-step-label { font-size: 9.5px; margin-bottom: 4px; }
  .wl-tour-text { font-size: 12.5px; line-height: 1.4; min-height: 0; margin-bottom: 8px; }
  .wl-tour-dots { margin-bottom: 8px; gap: 4px; }
  .wl-tour-dot { width: 5px; height: 5px; }
  .wl-tour-actions { gap: 6px; }
  .wl-tour-skip, .wl-tour-back, .wl-tour-next {
    padding: 6px 11px;
    font-size: 11px;
  }
}

/* ---- Hint-triggered category highlight ---- */
.wl-mobile-tab.wl-hint-flash,
.wl-rail.wl-hint-flash {
  border-radius: 12px;
}
.wl-mobile-tab[data-category="prefix"].wl-hint-flash,
.wl-rail[data-category="prefix"].wl-hint-flash { animation: wlHintFlashPrefix 1.1s ease-out; }
.wl-mobile-tab[data-category="root"].wl-hint-flash,
.wl-rail[data-category="root"].wl-hint-flash { animation: wlHintFlashRoot 1.1s ease-out; }
.wl-mobile-tab[data-category="suffix"].wl-hint-flash,
.wl-rail[data-category="suffix"].wl-hint-flash { animation: wlHintFlashSuffix 1.1s ease-out; }
.wl-mobile-tab[data-category="connector"].wl-hint-flash,
.wl-rail[data-category="connector"].wl-hint-flash { animation: wlHintFlashConnector 1.1s ease-out; }

@keyframes wlHintFlashPrefix { 0% { box-shadow: 0 0 0 0 rgba(255,122,69,.6); } 100% { box-shadow: 0 0 0 14px rgba(255,122,69,0); } }
@keyframes wlHintFlashRoot { 0% { box-shadow: 0 0 0 0 rgba(76,174,239,.6); } 100% { box-shadow: 0 0 0 14px rgba(76,174,239,0); } }
@keyframes wlHintFlashSuffix { 0% { box-shadow: 0 0 0 0 rgba(255,193,61,.6); } 100% { box-shadow: 0 0 0 14px rgba(255,193,61,0); } }
@keyframes wlHintFlashConnector { 0% { box-shadow: 0 0 0 0 rgba(79,191,152,.6); } 100% { box-shadow: 0 0 0 14px rgba(79,191,152,0); } }

/* ---- Merged word block ----
   A richer, more saturated turquoise than the pastel mint connector
   color, so the two don't read as "the same thing" at a glance. */
.wl-merged-word {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 16px;
  padding: 9px 18px 9px 9px;
}
.wl-merge-turquoise {
  background: linear-gradient(135deg, #2DD4BF 0%, #0D9488 100%);
  box-shadow: 0 4px 14px rgba(13,148,136,.35);
}
.wl-merge-pink {
  background: linear-gradient(135deg, #F472B6 0%, #DB2777 100%);
  box-shadow: 0 4px 14px rgba(219,39,119,.3);
}
.wl-merged-word.wl-merge-in {
  animation: wlMergeIn .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes wlMergeIn {
  0% { opacity: 0; transform: scale(.4) rotate(-8deg); }
  55% { opacity: 1; transform: scale(1.12) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* White "power-up" flash pop, and sparkle particles bursting outward
   — makes the merge itself feel like a satisfying game moment rather
   than a plain fade/scale transition. */
.wl-merged-word::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.wl-merged-word.wl-merge-in::before {
  animation: wlMergeFlash .45s ease-out;
}
@keyframes wlMergeFlash {
  0% { opacity: 0; transform: scale(.2); }
  40% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.7); }
}

.wl-merge-split, .wl-merge-word-text {
  position: relative;
  z-index: 1;
}

.wl-merge-sparkle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px 1px rgba(255,255,255,.85);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  animation: wlSparkleFly .75s ease-out forwards;
}
.wl-merge-sparkle.wl-sparkle-gold {
  background: #FFD873;
  box-shadow: 0 0 5px 1px rgba(255,216,115,.9);
  width: 6px;
  height: 6px;
}
@keyframes wlSparkleFly {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.5); }
  22% { opacity: 1; transform: translate(-50%,-50%) scale(1.3); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.3); }
}

/* Extra celebratory flash — only when the merge is the actual guided-
   mode target, so nailing the answer feels distinctly more special
   than just happening to form a real word. A double pulse-ring on top
   of the normal entrance, timed to land just after it settles. */
.wl-merge-celebrate {
  animation: wlMergeIn .5s cubic-bezier(.34,1.56,.64,1),
             wlMergeCelebrate 1.3s ease-out .5s,
             wlMergeGlowBreathe 1.9s ease-in-out 1.9s 2;
}
@keyframes wlMergeCelebrate {
  0%, 100% { box-shadow: 0 4px 14px rgba(13,148,136,.35), 0 0 0 0 rgba(45,212,191,0); }
  15% { box-shadow: 0 4px 14px rgba(13,148,136,.35), 0 0 0 10px rgba(45,212,191,.55); }
  35% { box-shadow: 0 4px 14px rgba(13,148,136,.35), 0 0 0 0 rgba(45,212,191,0); }
  50% { box-shadow: 0 4px 14px rgba(13,148,136,.35), 0 0 0 10px rgba(255,216,115,.55); }
  70% { box-shadow: 0 4px 14px rgba(13,148,136,.35), 0 0 0 0 rgba(255,216,115,0); }
  85% { box-shadow: 0 4px 14px rgba(13,148,136,.35), 0 0 0 10px rgba(45,212,191,.5); }
}
@keyframes wlMergeGlowBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

.wl-merge-split {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.28);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s ease, transform .15s ease;
}
.wl-merge-split:hover {
  background: rgba(255,255,255,.45);
  transform: scale(1.1) rotate(-8deg);
}

.wl-merge-word-text {
  color: #fff;
  font-family: 'Quicksand', 'Nunito', sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .01em;
  padding: 3px 6px;
}

@media (max-width: 640px) {
  .wl-merged-word { padding: 7px 14px 7px 7px; gap: 8px; }
  .wl-merge-word-text { font-size: 16px; }
  .wl-merge-split { width: 22px; height: 22px; }
}

/* ============================================================
   INTERACTIVE BRIX — the existing Guided-mode avatar is now the
   clickable NPC, instead of a separate floating widget (which
   duplicated him and only made sense in Guided mode anyway).
   ============================================================ */
.wl-brix-anchor {
  position: relative;
  flex-shrink: 0;
}
.wl-brix-anchor::after {
  content: "\2728";
  position: absolute;
  top: -6px;
  right: -8px;
  font-size: 13px;
  opacity: 0;
  transform: scale(.4) rotate(-25deg);
  transition: opacity .2s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.wl-brix-anchor:hover::after {
  opacity: 1;
  transform: scale(1) rotate(0);
}

.wl-brix-avatar-btn:hover {
  animation: wlBrixIdle 1.1s ease-in-out infinite;
}
.wl-brix-avatar-btn:active {
  transform: scale(.94);
}
@keyframes wlBrixIdle {
  0%, 100% { transform: rotate(0) translateY(0); }
  25% { transform: rotate(-8deg) translateY(-2px); }
  50% { transform: rotate(0) translateY(-4px); }
  75% { transform: rotate(8deg) translateY(-2px); }
}

.wl-brix-avatar-btn.wl-brix-trick {
  animation: wlBrixTrick .9s cubic-bezier(.34,1.56,.64,1);
}
@keyframes wlBrixTrick {
  0% { transform: rotate(0) scale(1); }
  30% { transform: rotate(180deg) scale(1.1); }
  60% { transform: rotate(340deg) scale(1.15); }
  85% { transform: rotate(365deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}

.wl-brix-bubble {
  position: absolute;
  top: 46px;
  left: 0;
  width: 220px;
  background: #FFF8EE;
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  animation: wlDialogueIn .25s ease-out;
  z-index: 20;
}
.wl-brix-bubble::after {
  content: "";
  position: absolute;
  top: -7px;
  left: 14px;
  width: 16px;
  height: 16px;
  background: #FFF8EE;
  transform: rotate(45deg);
  border-radius: 3px;
}

.wl-brix-bubble-text {
  position: relative;
  margin: 0 0 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: #4A3826;
}

.wl-brix-bubble-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wl-brix-bubble-btn {
  border: none;
  background: #FF7A45;
  color: #fff;
  font-family: 'Quicksand', 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .12s ease;
}
.wl-brix-bubble-btn:hover {
  transform: translateY(-1px);
}
.wl-brix-bubble-btn.wl-brix-bubble-btn-secondary {
  background: #FFFCF6;
  border: 0.5px solid #E8DAC5;
  color: #9A8467;
}

@media (max-width: 640px) {
  .wl-brix-bubble { width: 190px; top: 42px; }
}