/* What's the OTP? */
.otp-title { font-size: clamp(34px, 8vw, 56px); }

/* intro scene */
.otp-intro { position: relative; max-width: 760px; margin: 0 auto 22px; border: 1px solid var(--rule-strong); border-top: 4px solid var(--brand); background: #fff1cf; overflow: hidden; max-height: 420px; transition: max-height .6s ease, opacity .5s ease, margin .6s ease, border-width .6s ease; }
.otp-intro.done { max-height: 0; opacity: 0; margin-bottom: 0; border-width: 0; }
.otp-scene { display: block; width: 100%; height: auto; }
.otp-skip { position: absolute; right: 10px; top: 10px; appearance: none; border: 0; cursor: pointer; background: rgba(18,18,18,.78); color: #fff; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; }
.otp-ride { animation: otpride 2.5s cubic-bezier(.16,.72,.28,1) both; transform-origin: 366px 240px; }
.otp-bob { animation: otpbob .22s ease-in-out 11 alternate; }
.otp-wheel { animation: otpspin 2.5s cubic-bezier(.16,.72,.28,1) both; }
.otp-wheel:nth-of-type(1) { transform-origin: 300px 214px; }
.otp-wheel:nth-of-type(2) { transform-origin: 430px 214px; }
.otp-lines { animation: otplines 2.5s ease-out both; }
.otp-bubble { opacity: 0; transform-origin: 334px 70px; animation: otppop .38s 2.7s cubic-bezier(.2,1.5,.4,1) forwards; }
.otp-girl { animation: otpwait 1.3s ease-in-out infinite alternate; }
.otp-phone { animation: otpglow 1.2s ease-in-out infinite alternate; }
@keyframes otpride { 0% { transform: translateX(-560px) rotate(0); } 82% { transform: translateX(0) rotate(0); } 90% { transform: translateX(0) rotate(2.4deg); } 100% { transform: translateX(0) rotate(0); } }
@keyframes otpspin { to { transform: rotate(2520deg); } }
@keyframes otpbob { to { transform: translateY(-3px); } }
@keyframes otplines { 0% { opacity: .8; } 80% { opacity: .5; } 100% { opacity: 0; } }
@keyframes otppop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes otpwait { to { transform: translateY(-2px); } }
@keyframes otpglow { to { opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
  .otp-ride, .otp-bob, .otp-wheel, .otp-lines, .otp-girl, .otp-phone { animation: none; }
  .otp-lines { opacity: 0; }
  .otp-bubble { animation: none; opacity: 1; }
}

.otp-game.in { animation: bzfade .5s ease; }
.otp-game[hidden] { display: none; }

/* game card */
.otp-timer { font-family: var(--sans); font-weight: 800; font-size: 26px; font-variant-numeric: tabular-nums; color: var(--ink); margin: 6px 0 12px; letter-spacing: .03em; }
.otp-grid { display: grid; gap: 7px; justify-content: center; margin: 0 auto 6px; }
.otp-row { display: grid; grid-template-columns: repeat(4, var(--ts)); gap: 7px; justify-content: center; }
.otp-grid { --ts: clamp(54px, 15vw, 68px); }
.otp-tile { width: var(--ts); height: var(--ts); display: flex; align-items: center; justify-content: center; border: 2px solid #d3d6da; background: #fff; color: var(--ink); font-family: var(--sans); font-weight: 800; font-size: clamp(28px, 8vw, 36px); font-variant-numeric: tabular-nums; user-select: none; }
.otp-tile.filled { border-color: #878a8c; }
.otp-tile.pop { animation: otptilepop .12s ease; }
.otp-tile.g { --c: #6aaa64; }
.otp-tile.y { --c: #c9b458; }
.otp-tile.x { --c: #787c7e; }
.otp-tile.g, .otp-tile.y, .otp-tile.x { background: var(--c); border-color: var(--c); color: #fff; }
.otp-tile.flip { animation: otpflip .4s ease both; animation-delay: calc(var(--i) * .13s); }
.otp-row.shake { animation: otpshake .4s ease; }
@keyframes otptilepop { 50% { transform: scale(1.1); } }
@keyframes otpflip {
  0% { transform: rotateX(0); background: #fff; border-color: #878a8c; color: var(--ink); }
  49% { transform: rotateX(90deg); background: #fff; border-color: #878a8c; color: var(--ink); }
  50% { transform: rotateX(90deg); background: var(--c); border-color: var(--c); color: #fff; }
  100% { transform: rotateX(0); background: var(--c); border-color: var(--c); color: #fff; }
}
@keyframes otpshake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
.otp-msg { min-height: 20px; margin: 12px auto 12px; }

/* the dialpad: always grey, always enabled, never changes colour */
.otp-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(300px, 100%); margin: 0 auto; }
.otp-key { appearance: none; -webkit-appearance: none; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; height: 58px; border-radius: 12px; background: #d3d6da; color: #121212; font-family: var(--sans); font-weight: 700; font-size: 26px; touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform .06s ease; }
.otp-key:hover, .otp-key:focus, .otp-key:active, .otp-key:disabled { background: #d3d6da; color: #121212; }
.otp-key:active { transform: scale(.95); }
.otp-key:focus-visible { outline: 2px solid #121212; outline-offset: 2px; }
.otp-card .bz-result { margin-top: 22px; padding-top: 4px; border-top: 1px solid var(--rule); }
.otp-card .bz-result[hidden], .otp-card .bz-global[hidden], .bz-result .bz-actions[hidden] { display: none; }
.bz-dist.bad { color: #c0262d; }
.otp-chip { display: inline-block; padding: 0 8px; border-radius: 3px; color: #fff; font-weight: 700; font-size: .9em; }
.otp-chip.g { background: #6aaa64; }
.otp-chip.y { background: #c9b458; }
.otp-chip.x { background: #787c7e; }
.bz-rows .ds small { font-weight: 600; color: var(--muted); margin-left: 4px; font-size: 12px; }
.otp-main .bz-share { font-size: clamp(15px, 4.4vw, 20px); line-height: 1.6; }