/* Bubble keyboard: the app's name keyboard (build_app.py #namekb / .nkkey) as a web demo.
   Circle keys in navy with a gold rim and a sheen; a key lifts and flashes gold while
   pressed; the firefly hops; the name lands in a gold line with a caret. Built by
   js/components/keyboard.js inside <div class="db-keyboard" data-db="keyboard">.
   Key size --k follows the component's own width (container units). On a narrow phone the
   keys keep a 44px height and become capsules, because ten 44px circles cannot fit across. */
.db-keyboard{container-type:inline-size;position:relative;border-radius:var(--db-r-xl);overflow:hidden;
  background:radial-gradient(130% 100% at 50% -10%,var(--db-night-top),var(--db-night-bottom));
  border:var(--db-border);box-shadow:var(--db-shadow-2);color:var(--db-ink);font-family:var(--db-font)}
.db-keyboard__in{--pad:clamp(8px,2.4cqi,22px);--k:clamp(24px,calc((100cqi - 2 * var(--pad)) / 11.5),62px);--kg:calc(var(--k) * .15);
  --kh:max(var(--k),44px);display:flex;flex-direction:column;align-items:center;gap:calc(var(--kg) * 1.4);padding:calc(var(--pad) + 6px) var(--pad) calc(var(--pad) + 4px)}
.db-keyboard__title{margin:0;font-size:clamp(1rem,calc(var(--k) * .4),1.4rem);font-weight:600;text-align:center}

/* the name line */
.db-keyboard__line{display:flex;align-items:center;justify-content:center;gap:clamp(8px,calc(var(--k) * .3),20px);min-height:calc(var(--k) * 1.45);max-width:100%}
.db-keyboard__bug{width:clamp(40px,calc(var(--k) * 1.1),70px);height:auto;flex:none;filter:drop-shadow(0 6px 12px rgba(4,6,20,.45));transform-origin:50% 90%}
.db-keyboard__bug.is-hop{animation:db-kb-hop var(--m-dur) var(--m-ease-spring)}
@keyframes db-kb-hop{0%{transform:none}40%{transform:translateY(-14%) scale(1.06,.94)}100%{transform:none}}
.db-keyboard__name{display:flex;align-items:baseline;justify-content:center;min-width:min(calc(var(--k) * 4.4),60cqi);max-width:72cqi;
  min-height:calc(var(--k) * 1.05);padding:0 8px 6px;border-bottom:3px solid color-mix(in srgb,var(--db-gold) 38%,transparent);
  font-size:clamp(1.6rem,calc(var(--k) * .8),3rem);font-weight:700;color:var(--db-gold);letter-spacing:.03em;line-height:1;
  white-space:nowrap;overflow:hidden;border-radius:4px 4px 0 0;cursor:text}
.db-keyboard__name:focus-visible{outline:3px solid var(--db-focus);outline-offset:4px}
.db-keyboard__name.is-shake{animation:db-kb-shake var(--m-dur) linear}
@keyframes db-kb-shake{20%{transform:translateX(-6px)}45%{transform:translateX(5px)}70%{transform:translateX(-3px)}}
.db-keyboard__ch{display:inline-block}
.db-keyboard__ch.is-new{animation:db-kb-land var(--m-dur) var(--m-ease-spring) both}
.db-keyboard__ch.is-sp{width:.32em}
@keyframes db-kb-land{from{transform:translateY(-.55em) scale(.6);opacity:0}to{transform:none;opacity:1}}
.db-keyboard__ph{align-self:center;color:var(--db-muted);font-weight:600;font-size:max(.95rem,.46em);letter-spacing:0;opacity:.85;white-space:normal;text-align:center;line-height:1.2}
.db-keyboard__caret{display:inline-block;width:3px;height:.85em;margin-left:3px;align-self:center;border-radius:2px;background:var(--db-gold);
  animation:db-kb-blink calc(var(--m-dur-slow) * 3) steps(1) infinite}
@keyframes db-kb-blink{50%{opacity:0}}

/* keys */
.db-keyboard__keys{display:flex;flex-direction:column;align-items:center;width:100%}
.db-keyboard__page{display:none;flex-direction:column;align-items:center;gap:var(--kg);width:100%}
.db-keyboard__page.is-on{display:flex}
.db-keyboard__row{display:flex;gap:var(--kg);justify-content:center}
.db-keyboard__row--wrap{flex-wrap:wrap;max-width:calc(var(--k) * 13)}
.db-keyboard__bottom{display:flex;gap:calc(var(--kg) * 1.5);align-items:center;justify-content:center;margin-top:calc(var(--kg) * .5);flex-wrap:wrap}
.db-key{position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:var(--k);height:var(--kh);padding:0;
  border:1.5px solid color-mix(in srgb,var(--db-gold) 32%,transparent);border-radius:var(--db-r-pill);cursor:pointer;
  background:radial-gradient(circle at 36% 28%,color-mix(in srgb,var(--db-card-2),var(--db-muted) 18%) 0%,var(--db-card-2) 62%,var(--db-card) 100%);
  color:var(--db-ink);font:700 clamp(.95rem,calc(var(--k) * .44),1.6rem)/1 var(--db-font);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.14),inset 0 -3px 6px rgba(0,0,0,.28),0 6px 14px rgba(4,6,20,.36);
  user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:transform var(--m-dur-fast) var(--m-ease-spring),background var(--m-dur-fast) var(--m-ease),color var(--m-dur-fast) var(--m-ease),box-shadow var(--m-dur-fast) var(--m-ease)}
.db-key::after{content:"";position:absolute;left:22%;top:12%;width:34%;height:20%;border-radius:50%;background:rgba(255,255,255,.22);filter:blur(1px);pointer-events:none}
.db-key:hover{border-color:color-mix(in srgb,var(--db-gold) 55%,transparent)}
.db-key:focus-visible{outline:3px solid var(--db-focus);outline-offset:3px}
.db-key.is-down{transform:translateY(-12%) scale(1.1);z-index:1;border-color:var(--db-gold-pale);color:var(--db-ink-light);
  background:radial-gradient(circle at 36% 28%,var(--db-gold-pale),var(--db-gold) 60%,var(--db-gold-2) 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 0 0 7px color-mix(in srgb,var(--db-gold) 16%,transparent),0 14px 22px rgba(4,6,20,.42)}
.db-key svg{width:52%;height:52%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.db-key--wide{width:auto;min-width:calc(var(--k) * 1.45);padding:0 calc(var(--k) * .32);font-size:clamp(.85rem,calc(var(--k) * .32),1.15rem)}
.db-key--wide svg{width:1em;height:1em;margin-left:.3em;stroke-width:3}
.db-key--space{min-width:calc(var(--k) * 4.4)}
.db-key--alt{font-size:clamp(.85rem,calc(var(--k) * .32),1.1rem);letter-spacing:.02em}
.db-key--next{min-width:calc(var(--k) * 2.1);color:var(--db-ink-light);border-color:var(--db-gold-pale);
  background:radial-gradient(circle at 36% 28%,var(--db-gold-pale),var(--db-gold) 60%,var(--db-gold-2) 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 8px 18px color-mix(in srgb,var(--db-gold-2) 35%,transparent)}
.db-key--next[aria-disabled="true"]{opacity:.32;filter:saturate(.4);cursor:default}
.db-keyboard__page--alt .db-key:not(.db-key--wide){font-size:clamp(.95rem,calc(var(--k) * .4),1.45rem)}

.db-keyboard__status{min-height:1.4em;margin:0;font-size:var(--db-fs-small);font-weight:600;color:var(--db-gold);text-align:center}
.db-keyboard__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* live preview card beside the keyboard (data-preview) */
.db-keyboard-preview{padding:var(--db-s5);border-radius:var(--db-r-lg);background:var(--db-card);border:var(--db-border);box-shadow:var(--db-shadow-1)}
.db-keyboard-preview [data-name-slot]{color:var(--db-gold);font-weight:800}
.db-keyboard-preview [data-name-slot].is-empty{color:var(--db-muted);font-weight:600}

@container (max-width:520px){
  .db-key--space{min-width:calc(var(--k) * 3.2)}
  .db-key--wide{min-width:calc(var(--k) * 1.5)}
}
@media (prefers-reduced-motion:reduce){
  .db-keyboard__bug.is-hop,.db-keyboard__ch.is-new,.db-keyboard__name.is-shake,.db-keyboard__caret{animation:none!important}
  .db-key{transition:none}
  .db-key.is-down{transform:none}
}