:root {
    --h: 200;
    --bg: hsl(var(--h) 65% 86%);
    --ink: #1c2330;
    --paper: rgba(255, 255, 255, .65);
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; margin: 0; }
  body {
    background: var(--bg);
    color: var(--ink);
    font: 18px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
    display: grid;
    place-items: center;
    padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  }
  .stack { width: min(420px, 100%); }
  .box { border-radius: 18px; }
  [hidden] { display: none !important; }

  .big, .chip {
    width: 100%;
    min-height: 60px;
    border-radius: 18px;
    font: inherit;
  }
  .big {
    display: grid;
    place-items: center;
    padding: 0 18px;
    border: 0;
    background: var(--ink);
    color: var(--bg);
    font-weight: 650;
    cursor: pointer;
  }
  .msg { cursor: default; }
  .chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 20px;
    background: var(--paper);
    border: 2px solid var(--ink);
  }
  .chip span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
  .chip button {
    flex: none;
    width: 46px; height: 46px;
    border: 0; border-radius: 50%;
    background: var(--ink); color: var(--bg);
    font: inherit; font-size: 20px; line-height: 1;
    cursor: pointer;
  }
  #hint { margin: 16px 6px 0; text-align: center; font-size: .9rem; color: rgba(28, 35, 48, .75); }
  button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

  .hit { animation: hit .5s ease-out; }
  @keyframes hit {
    from { box-shadow: 0 0 0 0 rgba(28, 35, 48, .35); }
    to   { box-shadow: 0 0 0 30px rgba(28, 35, 48, 0); }
  }
  @media (prefers-reduced-motion: reduce) { .hit { animation: none; } }

  .chip button#share { font-size: 13px; font-weight: 700; }

#qr {
  margin-top: 18px;
  text-align: center;
}

#qrcode {
  display: inline-block;
  padding: 10px;
  background: var(--bg);
  border-radius: 14px;
}

#qrcode img,
#qrcode canvas {
  display: block;
  width: 60px;
  height: 60px;
}

#qr small {
  display: block;
  margin-top: 8px;
  font-size: .8rem;
  color: rgba(28, 35, 48, .75);
}

#shareBox { text-align: center; }
#shareqr {
  display: inline-block;
  padding: 14px;
  background: var(--bg);
  border-radius: 14px;
  margin-bottom: 12px;
}
#shareqr img, #shareqr canvas { display: block; width: 160px; height: 160px; }
#shareBox p {
  margin: 0 0 12px;
  font-size: .9rem;
  color: rgba(28, 35, 48, .75);
}