/* style.css (Sitting at your project root) */

/* 1. Core Variables, Resets, and Mobile Breakpoints */
@import url('./css/base.css');

/* 2. Component Layout Stylesheets */
@import url('./css/practice.css');
@import url('./css/modals.css');
@import url('./css/scores.css');

:root {
  --text-xs: 13px;
  --text-sm: 15px;
  --text-md: 18px;
  --text-lg: 24px;
  --text-xl: 32px;
  --text-2xl: 40px;
}


/* ==========================================================================
   8. RESPONSIVE MOBILE MEDIA BREAKPOINTS
   ========================================================================== */
@media (max-width: 600px) {
    body {
        align-items: stretch;
        padding: 16px;
        background:
          linear-gradient(
            180deg,
            #F7F1E8,
            #EEE5D7
          );
        font-size: 18px;
    }

    .app {
        width: 100%;
        min-height: 100dvh;
        padding: 0;
        border-radius: 0;
    }

    .card {
        box-sizing: border-box;
        border: none;
        border-width: 4px;
        padding: 28px 24px;
        display: flex;
        flex-direction: column;
        width: 100%;
        min-height: auto;

        border-radius: 32px;

        background:
          linear-gradient(
            180deg,
            #FFFDF8,
            #F8F0E4
          );

        box-shadow:
          0 2px 10px rgba(0,0,0,0.03),
          0 20px 40px rgba(180,140,70,0.08);

    }

    .selector-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }

    .selector-row select,
    .selector-row .select {
        width: 100%;
        min-width: 0;
        font-size: 16px;
        padding: 8px;
        box-sizing: border-box;
    }

    h1 {
        font-size: 28px;
        line-height: 1.15;
        text-align: center;
        margin: 22px 0 14px;
    }

    .verseInput {
        min-width: 6ch;
        font-size: 28px;
        line-height: 1.85;
    }

    .nav-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        width: 100%;
        margin-top: 22px;
    }

    .nav-row button,
    button {
        min-height: 44px;
        margin-top: 0;
        padding: 8px 12px;
        font-size: 18px;
        touch-action: manipulation;
    }
}