/* =====================================================================
   NUMBER CAROUSEL: number tiles, Back / Next, number list and Listen button.
   ===================================================================== */

/* ======================= END GAP-FILL EXERCISES ======================= */
/* =====================================================================
   NUMBER CAROUSEL  (5 tiles on computers, 3 on phones)
   ===================================================================== */
.num-carousel {
    overflow: hidden;
    padding: 34px 0 30px;              /* room for the enlarged middle tile */
}

.num-track {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
}

.num-tile {
    flex: none;
    width: clamp(110px, 15vw, 170px);
    height: clamp(146px, 20vw, 220px);
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 16px;
    box-shadow: 0 3px 10px rgb(0 0 0 / .08);
    text-align: center;
    transform: scale(.72);
    opacity: .45;
    transition: transform .35s ease, opacity .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.num-tile.is-centre {
    transform: scale(1.15);
    opacity: 1;
    border-color: var(--accent);
    box-shadow: 0 10px 26px rgb(0 0 0 / .14);
    z-index: 2;
}

.num-tile .num {                        /* the number in digits */
    font-size: clamp(2.6rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1;
    color: var(--ink);
}

.num-tile .words {                      /* the number in words */
    font-size: clamp(.8rem, 1.3vw, .95rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--accent);
}

.num-tile .words .after-and { display: block; }   /* "one hundred and / twenty-one" on two lines */

/* controls: Back / Next centred under the middle tile, number list + Listen on the right */
.num-controls {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 26px;                  /* space between the tiles and the buttons */
    min-height: 48px;
}

.num-pick {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.num-nav, .num-pick { display: flex; gap: 10px; align-items: center; }

.num-btn {
    padding: 10px 20px;
    border: 0;
    border-radius: 99px;
    background: var(--ink);
    color: #fff;
    font: 700 1rem var(--font);
    cursor: pointer;
    transition: transform .15s ease, background-color .15s ease;
}

.num-btn:hover { transform: scale(1.05); }

.num-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.num-btn--listen { background: var(--accent); }

.num-btn--listen.is-playing { background: var(--purple); }

#numberSelect {
    -webkit-appearance: none;
    appearance: none;
    padding: 9px 36px 9px 16px;
    border: 2px solid var(--accent);
    border-radius: 99px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6072' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 14px;
    color: var(--ink);
    font: 700 1rem var(--font);
    cursor: pointer;
}

#numberSelect:focus, #numberSelect:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgb(46 134 171 / .18); }   /* single soft highlight when clicked */

@media (max-width: 900px) {            /* smaller screens: number list + Listen on their own line, centred */
    .num-controls { flex-direction: column; gap: 12px; }
    .num-pick { position: static; transform: none; }
}

@media (max-width: 640px) {
    .num-tile:nth-child(1), .num-tile:nth-child(5) { display: none; }   /* phones: 3 tiles */
    .num-controls { margin-top: 18px; }
}

@media print {
    .num-controls { display: none; }
}