number-pad{display:grid;grid-template-columns:repeat(9,1fr);gap:clamp(4px,1.2vw,8px);width:min(100%,540px)}pad-key button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:100%;padding:.5rem 0 .4rem;border-radius:var(--radius-m);background:var(--color-surface-container-low);border:1px solid var(--color-outline-variant);transition:background-color .15s var(--ease-standard),transform .3s var(--ease-spring),box-shadow .2s var(--ease-standard)}pad-key button:hover{background:var(--color-surface-container-high);box-shadow:var(--shadow-1)}pad-key button:active{transform:scale(.88);background:var(--color-primary-container)}key-digit{font-size:clamp(1.15rem,4.5vw,1.5rem);font-weight:700;color:var(--color-primary);line-height:1.1}key-count{font-size:.62rem;font-weight:600;color:var(--color-on-surface-variant)}pad-key[exhausted=true]{visibility:hidden}@keyframes key-celebrate{0%,to{transform:scale(1)}50%{transform:scale(1.18)}}pad-key[celebrate=true]{animation:key-celebrate .4s var(--ease-spring)}@media(min-width:940px){number-pad{grid-template-columns:repeat(3,1fr);gap:10px;width:100%}pad-key button{padding:.9rem 0 .7rem;border-radius:var(--radius-l)}key-digit{font-size:1.7rem}key-count{font-size:.72rem}}