/* The website's own piece of the World: the "let's play" card that takes the
   first tap (world-bridge.js). Drawn in the World's style (world.css): its
   sky shows through, Baloo for the words. */
.wb-gate {
  position: fixed; inset: 0; z-index: 900;
  display: grid; place-items: center; padding: 16px;
  background: radial-gradient(120% 90% at 50% 10%, rgba(255, 255, 255, .55), rgba(125, 200, 247, .55));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity .4s ease, visibility .4s;
}
.wb-gate.wb-gone { opacity: 0; visibility: hidden; }
.wb-card {
  width: min(520px, 100%); text-align: center;
  background: #fff; border-radius: 36px; padding: 26px 24px 22px;
  box-shadow: 0 24px 60px rgba(3, 105, 161, .28), 0 0 0 6px rgba(255, 255, 255, .6);
  font-family: 'Nunito', ui-rounded, system-ui, sans-serif; color: #0f3554;
  animation: wb-pop .55s cubic-bezier(.2, 1.4, .4, 1) both;
}
.wb-bot { width: clamp(120px, 26vh, 190px); margin: -6px auto 4px; animation: wb-float 3.2s ease-in-out infinite; }
.wb-bot svg { width: 100%; height: auto; display: block; }
.wb-card h1 { font-family: 'Baloo 2', ui-rounded, system-ui, sans-serif; font-weight: 800; font-size: clamp(30px, 6vw, 40px); margin: 4px 0 6px; color: #0369a1; }
.wb-card p { margin: 0 0 18px; font-weight: 700; font-size: 17px; line-height: 1.45; color: #335b78; }
.wb-card p span { font-family: 'Baloo Bhaijaan 2', 'Baloo 2', system-ui, sans-serif; font-weight: 600; display: inline-block; margin-top: 4px; }
.wb-go {
  display: inline-flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 34px;
  border: 4px solid #fff; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, #4ade80, #16a34a); color: #fff;
  font: 800 24px 'Baloo 2', ui-rounded, system-ui, sans-serif;
  box-shadow: 0 10px 24px rgba(22, 163, 74, .35);
  transition: transform .15s ease;
}
.wb-go span { font-family: 'Baloo Bhaijaan 2', 'Baloo 2', system-ui, sans-serif; font-weight: 700; opacity: .92; }
.wb-go:hover { transform: translateY(-2px) scale(1.02); }
.wb-go:active { transform: scale(.97); }
.wb-go:focus-visible { outline: 4px solid #0369a1; outline-offset: 3px; }
.wb-go:disabled { opacity: .75; cursor: progress; }
.wb-card small { display: block; margin-top: 16px; font-weight: 700; font-size: 13px; color: #6b8aa3; }
.wb-card small a { color: #0284c7; }
@keyframes wb-pop { from { transform: scale(.85) translateY(20px); opacity: 0; } }
@keyframes wb-float { 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .wb-card, .wb-bot { animation: none; } }

/* The accent pill beside EN / عربي, and its sheet (world-bridge.js). */
.wb-accent { display: flex; align-items: center; gap: 6px; flex: none; cursor: pointer;
  background: #fff; border: 3px solid #fff; border-radius: 999px; padding: 6px 14px 6px 10px; box-shadow: var(--shadow, 0 6px 16px rgba(15, 53, 84, .12));
  font: 900 .95rem 'Nunito', 'Baloo Bhaijaan 2', ui-rounded, system-ui, sans-serif; color: var(--navy, #0f3554); }
.wb-accent svg { width: 20px; height: 20px; color: #0284c7; }
.wb-accent b { font-weight: 900; white-space: nowrap; }
.wb-accent:active { transform: scale(.96); }
.wb-sheet { position: fixed; inset: 0; z-index: 950; display: grid; place-items: center; padding: 16px;
  background: rgba(125, 200, 247, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.wb-sheet-card { position: relative; width: min(640px, 100%); max-height: calc(100dvh - 32px); overflow: auto;
  background: #fff; border-radius: 32px; padding: 22px 22px 24px; box-shadow: 0 24px 60px rgba(3, 105, 161, .28);
  font-family: 'Nunito', ui-rounded, system-ui, sans-serif; color: #0f3554; animation: wb-pop .4s cubic-bezier(.2, 1.4, .4, 1) both; }
.wb-sheet-card h2 { font: 800 1.45rem 'Baloo 2', ui-rounded, system-ui, sans-serif; margin: 0 40px 6px 0; color: #0369a1; }
.wb-sheet-card h2 span { font-family: 'Baloo Bhaijaan 2', 'Baloo 2', system-ui, sans-serif; display: block; font-size: 1.15rem; color: #335b78; }
.wb-sheet-card h3 { margin: 16px 0 8px; font: 800 1rem 'Baloo 2', 'Baloo Bhaijaan 2', system-ui, sans-serif; color: #6b8aa3; }
.wb-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.wb-chip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; cursor: pointer;
  border: 3px solid #e0f2fe; border-radius: 18px; background: #f8fbff; color: #0f3554; transition: transform .12s, border-color .15s; }
.wb-chip b { font: 800 1.15rem 'Baloo Bhaijaan 2', 'Baloo 2', system-ui, sans-serif; }
.wb-chip small { font-weight: 800; font-size: .75rem; color: #6b8aa3; }
.wb-chip:hover { transform: translateY(-2px); border-color: #7dd3fc; }
.wb-chip.on { border-color: #22c55e; background: #f0fdf4; }
.wb-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: #f1f5f9; color: #0f3554; font: 800 1.5rem/1 system-ui, sans-serif; }
@media (max-width: 600px) {
  .wb-accent { padding: 5px 10px 5px 8px; }
  .wb-accent b { font-size: .85rem; }
  .wb-chips { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* The mic light in the accent pill (world-bridge.js micLight). */
.wb-mic { width: 10px; height: 10px; border-radius: 50%; flex: none; background: #cbd5e1; transition: background .12s, box-shadow .12s; }
.wb-mic-idle { background: #94a3b8; }
.wb-mic-on { background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .25); }
.wb-mic-bad { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .2); }