/******************************
  Global scroll prevention
******************************/
html, body {
    height: 100%;
    overflow: hidden; /* Hide scrollbars */
}

/* Prevent scroll chaining/bounce on touch devices */
html, body {
    overscroll-behavior: none;
}

/* Hide scrollbars in WebKit */
::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* In case any container overflows */
* {
    overscroll-behavior: none;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    display: grid;
    place-items: center;
    background: #0b0f1a;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.stack {
    position: relative;
    width: min(90vw, 420px);
    height: min(70vh, 560px);
}

.card {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: #fff34d;
    box-shadow: 0 4px 10px rgba(0,0,0,.10);
    display: grid;
    place-items: center;
    touch-action: none;
    user-select: none;
    cursor: grab;
}

.card:active {
    cursor: grabbing;
}

.card.tilted {
    transform: rotate(-3deg) translateY(-6px);
}

.number {
    margin: 0;
    font-size: clamp(64px, 18vmin, 180px);
    line-height: 1;
    color: #d62828;
    text-shadow: 0 6px 0 rgba(0,0,0,.12);
}

.bomb {
    font-size: clamp(80px, 20vmin, 200px);
}