body {
    font-family: 'Quicksand', sans-serif;
    touch-action: manipulation; /* prevents iPadOS double-tap-zoom on rapidly repeated taps (e.g. mashing a direction button) */
}

.tt-stats-bar {
    display: flex;
    justify-content: center;
    gap: clamp(12px, 4vw, 36px);
    margin: 16px auto 4px;
    padding: 10px 16px;
    flex-wrap: wrap;
}

.tt-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tt-stat-label {
    font-family: 'Quicksand', sans-serif;
    font-size: clamp(0.6rem, 2vw, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #64748b;
}

.tt-stat-value {
    font-family: 'Quicksand', sans-serif;
    font-size: clamp(1.1rem, 4.5vw, 1.6rem);
    font-weight: 700;
    color: #1e293b;
}

.tt-game-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(12px, 3vw, 28px);
    padding: 4px 12px 8px;
}

.tt-board-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

#boardCanvas {
    background: #1e293b;
    border-radius: 10px;
    box-shadow: inset 0 4px 14px rgba(0,0,0,0.4);
    /* width/height set in JS to preserve the 1:2 board aspect ratio
       against whichever of viewport width/height is the binding constraint */
    touch-action: none;
}

.tt-side-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding-top: 4px;
}

.tt-next-label {
    font-family: 'Quicksand', sans-serif;
    font-size: clamp(0.65rem, 2vw, 0.8rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #64748b;
}

#nextCanvas {
    background: #1e293b;
    border-radius: 8px;
    box-shadow: inset 0 3px 10px rgba(0,0,0,0.35);
}

.tt-btn-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.tt-start-btn {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: clamp(1rem, 4vw, 1.2rem);
    padding: 12px 40px;
    border: none;
    border-radius: 999px;
    background: #38bdf8;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.35);
    touch-action: manipulation;
}

.tt-start-btn:disabled {
    background: #94a3b8;
    box-shadow: none;
    cursor: default;
}

.tt-pause-btn {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: clamp(1rem, 4vw, 1.2rem);
    padding: 12px 28px;
    border: none;
    border-radius: 999px;
    background: #e2e8f0;
    color: #1e293b;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Touch controls: hidden by default (desktop uses keyboard), shown on touch devices */
.tt-touch-controls {
    display: none;
    justify-content: center;
    align-items: center;
    gap: clamp(8px, 2.5vw, 16px);
    padding: 10px 12px 24px;
    flex-wrap: wrap;
}

@media (hover: none) and (pointer: coarse) {
    .tt-touch-controls { display: flex; }
}

.tt-ctrl-btn {
    font-family: 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: clamp(1.1rem, 4vw, 1.4rem);
    width: clamp(48px, 12vw, 60px);
    height: clamp(48px, 12vw, 60px);
    border: none;
    border-radius: 14px;
    background: #e2e8f0;
    color: #1e293b;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.tt-drop-btn {
    width: auto;
    padding: 0 18px;
    font-size: clamp(0.85rem, 3vw, 1rem);
    background: #38bdf8;
    color: #fff;
}

/* Landscape on short phones: stack controls tighter, board shrinks via JS sizing already */
@media (max-height: 430px) and (orientation: landscape) {
    .tt-stats-bar { margin: 6px auto 2px; padding: 4px 12px; }
    .tt-game-wrap { padding: 2px 12px 4px; }
    .tt-touch-controls { padding: 6px 12px 10px; }
}

@media (max-width: 380px) {
    .tt-stat-value { font-size: 1rem; }
    .tt-stat-label { font-size: 0.55rem; }
}