@font-face {
    font-family: 'Cause';
    font-style: normal;
    font-weight: 400 700;
    font-display: block;
    src: url('fonts/cause-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'Cause';
    font-style: normal;
    font-weight: 400 700;
    font-display: block;
    src: url('fonts/cause-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400 800;
    font-display: block;
    src: url('fonts/outfit-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400 800;
    font-display: block;
    src: url('fonts/outfit-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 220px;
    width: 1px;
    height: 100%;
    background: #d4c8b8;
    z-index: 5;
  }

  html, body {
    height: 100%;
    overflow: hidden;
  }

  body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #f9f5f0;
    background-image:
      linear-gradient(to right, #ede5db 220px, transparent 220px),
      radial-gradient(circle, rgba(221,221,221,0.45) 1.5px, transparent 1.5px);
    background-size: 100% 100%, 24px 24px;
    background-repeat: no-repeat, repeat;
    font-family: 'Outfit', sans-serif;
    color: #222;
  }

  /* ── Header ── */
  .bar {
    background: #ff6b6b;
    padding: clamp(18px, 3vw, 28px) clamp(20px, 4vw, 40px) clamp(32px, 5vw, 48px);
    clip-path: polygon(0 0, 100% 0, 100% 76%, 0 100%);
    flex-shrink: 0;
    position: relative;
    z-index: 10;
  }
  .bar h1 {
    font-size: clamp(26px, 5.5vw, 50px);
    font-weight: 700;
    color: #fff;
    text-shadow: 3px 3px 0 rgba(0,0,0,0.12);
    line-height: 1.1;
    letter-spacing: -0.3px;
  }
  .bar p {
    font-size: clamp(11px, 1.8vw, 13px);
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    margin-top: 5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
  }
  /* ── Toggle ── */
  .toggle-wrap {
    position: absolute;
    top: 20px;
    right: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }
  #toggle-emoji::before { content: '🤣'; font-size: clamp(18px, 5vw, 44px); line-height: 1; }
  html.sad-mode #toggle-emoji::before { content: '😔'; }
  .toggle-btn {
    font-size: clamp(9px, 1.8vw, 22px);
    width: 2.3em;
    height: 1.15em;
    background: rgba(0,0,0,0.2);
    border: none;
    border-radius: 0.6em;
    cursor: pointer;
    position: relative;
    transition: background 0.25s;
    padding: 0;
    flex-shrink: 0;
  }
  html:not(.sad-mode) .toggle-btn { background: rgba(255,255,255,0.85); }
  .toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(1.15em - 4px);
    height: calc(1.15em - 4px);
    background: rgba(255,255,255,0.65);
    border-radius: 50%;
    transition: transform 0.25s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  }
  html:not(.sad-mode) .toggle-thumb {
    transform: translateX(1.15em);
    background: #ff6b6b;
  }

  .random-btn {
    position: absolute;
    bottom: 28px;
    right: 28px;
    z-index: 1;
    width: 52px;
    height: 52px;
    background: #ff6b6b;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(255,107,107,0.45);
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .random-btn:hover { transform: scale(1.08); box-shadow: 0 6px 22px rgba(255,107,107,0.55); }
  .random-btn:active { transform: scale(0.94); }

  /* ── Layout ── */
  .layout { display: flex; flex: 1; overflow: visible; min-height: 0; }

  /* ── Sidebar ── */
  .sidebar {
    width: 220px;
    flex-shrink: 0;
    background: #ede5db;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    margin-top: -4px;
  }
  .sidebar-section {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #a8987e;
    padding: 16px 18px 6px;
  }
  .sidebar-section:first-of-type { padding-top: 22px; }
  .sidebar ul { list-style: none; padding: 0 10px 4px; }
  .sidebar ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 700;
    color: #7a6a58;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    line-height: 1.3;
  }
  .sidebar ul li a::before {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c4b8aa;
    flex-shrink: 0;
    transition: background 0.15s;
  }
  .sidebar ul li a:hover { background: rgba(255,255,255,0.55); color: #ff6b6b; }
  .sidebar ul li a:hover::before { background: #ff6b6b; }
  .sidebar ul li a.active { background: #fff; color: #ff6b6b; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
  .sidebar ul li a.active::before { background: #ff6b6b; }

  /* ── Main ── */
  .main {
    flex: 1;
    display: flex;
    align-items: safe center;
    justify-content: center;
    padding: clamp(20px, 3vw, 40px) clamp(16px, 4vw, 48px) clamp(60px, 11vw, 100px);
    position: relative;
    overflow: visible;
  }

  /* ── Card ── */
  .card-wrap:has(.diagram) { width: min(360px, 100%); }

  .card-wrap {
    display: none;
    position: relative;
    width: min(420px, 100%);
    cursor: pointer;
    perspective: 1200px;
    transition: transform 0.2s ease;
  }
  .card-wrap:hover { transform: translateY(-4px); }
  .card-wrap.active { display: block; }

  .card {
    width: 100%;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform: rotate(-0.8deg);
    position: relative;
    touch-action: manipulation;
  }
  .card.flipped { transform: rotateY(180deg) rotate(-0.8deg); }

  .face {
    border-radius: 18px;
    border: 2px solid #ede4d8;
    box-shadow: 0 8px 0 #ddd0c0, 0 14px 44px rgba(0,0,0,0.09);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  /* Front */
  .front {
    background: #fff;
    padding: clamp(28px, 5vw, 44px) clamp(24px, 5vw, 44px) clamp(32px, 5vw, 44px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .front h2 {
    font-family: 'Cause', sans-serif;
    font-size: clamp(20px, 4.5vw, 28px);
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: clamp(18px, 3.5vw, 26px);
    line-height: 1.2;
    text-align: center;
  }
  .front h2:only-child {
    font-size: clamp(20px, 4vw, 30px);
    margin-bottom: 0;
  }
  .front h2:last-child { margin-bottom: 0; }
  .given {
    font-size: clamp(16px, 3vw, 22px);
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    margin-bottom: 14px;
  }
  .front h2 em { color: #ff6b6b; font-style: normal; }

  .foc-facts {
    font-family: 'Cause', sans-serif;
    font-weight: 700;
    font-size: clamp(15px, 3vw, 20px);
    line-height: 1.55;
    color: #1a1a1a;
    text-align: center;
    margin-bottom: clamp(12px, 2vw, 18px);
    width: 100%;
  }
  .foc-facts p { margin: 0; }
#fractions-of-class .front h2 { font-size: clamp(18px, 4vw, 24px); }

  #time-problems .given { font-size: clamp(13px, 2.4vw, 17px); line-height: 1.5; }
  #time-problems .front h2 { font-size: clamp(17px, 3.5vw, 23px); }
  #time-problems .back .value { font-size: clamp(32px, 8vw, 56px); }

  .diagram {
    background: #fdf8f2;
    border-radius: 12px;
    border: 2px dashed #e5d9c8;
    padding: clamp(16px, 3vw, 24px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .diagram svg { width: 100%; max-width: 300px; height: auto; display: block; }

  .nth-sequence {
    display: flex;
    gap: clamp(8px, 1.5vw, 14px);
    justify-content: center;
    font-family: 'Cause', sans-serif;
    font-size: clamp(18px, 3.5vw, 24px);
    font-weight: 700;
    color: #1a1a1a;
    margin: clamp(10px, 2vw, 18px) 0;
  }
  .nth-sequence span {
    width: 1.9em;
    height: 1.9em;
    border-radius: 50%;
    border: 2px solid #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Card 15: scale everything down proportionally so it fits without clipping */
  #perimeter.card-wrap { width: min(340px, 100%); }
  #perimeter .front { padding: clamp(14px, 2.5vw, 22px) clamp(14px, 2.5vw, 22px) clamp(16px, 2.5vw, 22px); }
  #perimeter .front > p { font-size: clamp(14px, 2.5vw, 17px); font-weight: 600; color: #1a1a1a; text-align: center; margin-bottom: clamp(14px, 2.5vw, 22px); }
  #perimeter .diagram { padding: clamp(10px, 2vw, 14px); }
  #perimeter .diagram svg { max-width: 240px; }
  #perimeter .front h2 { font-size: clamp(15px, 3vw, 20px); margin-top: 16px; margin-bottom: 0; }
  #volume-of-cube .front h2 { margin-bottom: 10px; }
  #nth-term .given { font-size: clamp(16px, 3.2vw, 21px); font-weight: 400; margin-bottom: clamp(10px, 2vw, 16px); }
  #nth-term .front h2 { font-size: clamp(15px, 3vw, 20px); }
  #nth-term .front h2 em { color: #1a1a1a; }

  /* ── Question text sizes by card ── */
  #simple-equations .front h2,
  #random-times-tables .front h2,
  #hardest-times-tables .front h2 { font-size: clamp(48px, 10vw, 72px); white-space: nowrap; }

  #addition .front h2,
  #subtraction .front h2,
  #multiplication .front h2,
  #division .front h2 { font-size: clamp(40px, 9vw, 64px); }

  #two-step-equations .front h2 { font-size: clamp(36px, 8vw, 58px); white-space: nowrap; }

  #adding-fractions .front h2,
  #subtracting-fractions .front h2,
  #multiplying-fractions .front h2,
  #dividing-fractions .front h2,
  #simplifying-fractions .front h2,
  #top-heavy-fractions .front h2 { font-size: clamp(17px, 3.5vw, 22px); margin-bottom: clamp(14px, 3vw, 22px); }

  /* ── Answer display overrides ── */
  #numbers-as-words .back .value { font-size: clamp(22px, 4.5vw, 36px); text-align: center; line-height: 1.3; }

  #volume-of-cube .front > p { font-size: clamp(14px, 2.8vw, 17px); font-weight: 700; color: #1a1a1a; text-align: center; margin: 6px 0 0; }

  /* Single-fraction answer — only thing on the back, so go large */
  #subtracting-fractions .back .frac-term.white,
  #simplifying-fractions .back .frac-term.white,
  #multiplying-fractions .back .frac-term.white,
  #dividing-fractions #c22-simple { font-size: clamp(52px, 13vw, 84px); }

  /* Top-heavy answer: match fraction size to the whole-number beside it */
  #top-heavy-fractions .back .frac-term.white { font-size: clamp(40px, 10vw, 68px); }

  /* Multi-part answer (improper = mixed number) — side-by-side */
  #adding-fractions .back .frac-term.white,
  #dividing-fractions .frac-both .frac-term.white { font-size: clamp(52px, 13vw, 72px); }

  #percent-as-fraction .pct-display {
    font-family: 'Cause', sans-serif;
    font-weight: 700;
    font-size: clamp(52px, 13vw, 84px);
    line-height: 1;
    color: #1a1a1a;
  }
  #percent-as-fraction .pct-display em { font-style: normal; }
  #percent-as-fraction #cPF-simple { font-size: clamp(36px, 9vw, 64px); }
  #percent-as-fraction .frac-both .frac-term.white { font-size: clamp(30px, 8vw, 56px); }

  #adding-fractions .frac-both .frac-whole,
  #dividing-fractions .frac-both .frac-whole { font-size: clamp(60px, 15vw, 84px); }

  /* Back */
  .back {
    position: absolute;
    inset: 0;
    background: #ff6b6b;
    background-image: radial-gradient(circle, rgba(255,255,255,0.12) 1.5px, transparent 1.5px);
    background-size: 20px 20px;
    border-radius: 18px;
    border: 2px solid #ede4d8;
    box-shadow: 0 8px 0 #ddd0c0, 0 14px 44px rgba(0,0,0,0.09);
    transform: rotateY(180deg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: clamp(24px, 5vw, 40px);
  }
  .back .label {
    font-family: 'Cause', sans-serif;
    font-size: clamp(11px, 2vw, 13px);
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .back-hint {
    font-size: clamp(11px, 2vw, 14px);
    font-weight: 500;
    color: rgba(255,255,255,0.55);
    margin-top: 2px;
  }
  .back .value {
    font-family: 'Cause', sans-serif;
    font-size: clamp(40px, 10vw, 68px);
    font-weight: 800;
    color: #fff;
    line-height: 1;
    text-shadow: 0 2px 16px rgba(0,0,0,0.15);
  }

  /* ── Footer ── */
  .footer {
    flex-shrink: 0;
    text-align: center;
    padding: 12px 20px;
    font-size: 12px;
    color: #a8987e;
    background: linear-gradient(to right, #ede5db 220px, #f9f5f0 220px);
    border-top: 1px solid #ddd0c0;
    letter-spacing: 0.3px;
  }

  /* ── Fraction answer: both forms ── */
  .frac-both {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 1.5vw, 10px);
  }
  .frac-eq {
    font-family: 'Cause', sans-serif;
    font-weight: 700;
    font-size: clamp(36px, 9vw, 50px);
    color: rgba(255,255,255,0.85);
    line-height: 1;
  }

  /* ── Fraction display ── */
  .frac-expr {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 2.5vw, 20px);
  }
  .frac-term {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Cause', sans-serif;
    font-weight: 700;
    font-size: clamp(38px, 9vw, 60px);
    line-height: 1.15;
    color: #1a1a1a;
  }
  .frac-term.white {
    font-size: clamp(26px, 6.5vw, 44px);
    color: #fff;
  }
  .frac-bar {
    width: 100%;
    min-width: 0.8em;
    height: 5px;
    background: #1a1a1a;
    border-radius: 9999px;
    margin: 3px 0;
  }
  .frac-bar.white {
    height: 4.5px;
    background: rgba(255,255,255,0.85);
  }
  .frac-op {
    font-family: 'Cause', sans-serif;
    font-weight: 700;
    font-size: clamp(38px, 9vw, 60px);
    color: #1a1a1a;
    line-height: 1;
    padding-bottom: 6px;
  }
  .frac-answer {
    display: flex;
    align-items: center;
    gap: clamp(6px, 1.5vw, 12px);
  }
  .frac-whole {
    font-family: 'Cause', sans-serif;
    font-weight: 800;
    font-size: clamp(40px, 10vw, 68px);
    color: #fff;
    line-height: 1;
    text-shadow: 0 2px 16px rgba(0,0,0,0.15);
  }

  /* ── Mobile ── */
  @media (max-width: 600px) {
    #perimeter.card-wrap { width: min(310px, 90%); }
    #perimeter .front { padding: 16px 16px 18px; }
    #perimeter .front > p { font-size: 13px !important; margin-bottom: 6px; }
    #perimeter .diagram { padding: 10px; }
    #perimeter .diagram svg { max-width: min(210px, 70vw); }
    #perimeter .front h2 { font-size: 17px; margin-top: 8px; }
    .bar { cursor: pointer; }
    body {
      background-color: #f9f5f0;
      background-image: radial-gradient(circle, rgba(221,221,221,0.45) 1.5px, transparent 1.5px);
      background-size: 24px 24px;
      background-repeat: repeat;
    }
    body::before { display: none; }
    .main { padding: 10px 32px 80px; }
    .sidebar {
      position: fixed;
      top: 0; left: 0; bottom: 0;
      width: 260px;
      z-index: 100;
      transform: translateX(-100%);
      transition: transform 0.3s ease;
      box-shadow: 4px 0 24px rgba(0,0,0,0.13);
      margin-top: 0;
    }
    .sidebar.open { transform: translateX(0); }
    .overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.3);
      z-index: 99;
    }
    .overlay.open { display: block; }
    .footer { background: #f9f5f0; }
  }

  /* ── Large desktop ── */
  @media (min-width: 1400px) {
    .card-wrap { width: min(600px, 100%); }
    .card-wrap:has(.diagram) { width: min(520px, 100%); }
    #perimeter.card-wrap { width: min(460px, 100%); }

    .diagram svg { max-width: 400px; }
    #perimeter .diagram svg { max-width: 320px; }
    #perimeter .front { padding: 28px; }

    .back .value { font-size: 96px; }
    #numbers-as-words .back .value { font-size: 48px; }
    .back .label { font-size: 16px; }
    .back-hint { font-size: 18px; }

    .front h2 { font-size: 38px; }
    .given { font-size: 28px; }

    #simple-equations .front h2,
    #random-times-tables .front h2,
    #hardest-times-tables .front h2 { font-size: 100px; }

    #addition .front h2,
    #subtraction .front h2,
    #multiplication .front h2,
    #division .front h2 { font-size: 88px; }

    #two-step-equations .front h2 { font-size: 80px; }

    #adding-fractions .front h2,
    #subtracting-fractions .front h2,
    #multiplying-fractions .front h2,
    #dividing-fractions .front h2,
    #simplifying-fractions .front h2,
    #top-heavy-fractions .front h2 { font-size: 28px; }

    #perimeter .front > p { font-size: 22px; }
    #perimeter .front h2 { font-size: 26px; }
    #volume-of-cube .front > p { font-size: 22px; }
    #nth-term .front h2 { font-size: 26px; }
    #nth-term .given { font-size: 26px; }

    .nth-sequence { font-size: 32px; }

    .frac-term { font-size: 82px; }
    .frac-op { font-size: 82px; }
    .frac-eq { font-size: 68px; }
    .frac-whole { font-size: 96px; }

    #subtracting-fractions .back .frac-term.white,
    #simplifying-fractions .back .frac-term.white,
    #multiplying-fractions .back .frac-term.white,
    #dividing-fractions #c22-simple { font-size: 116px; }

    #top-heavy-fractions .back .frac-term.white { font-size: 96px; }

    #adding-fractions .back .frac-term.white,
    #dividing-fractions .frac-both .frac-term.white { font-size: 100px; }

    #percent-as-fraction .pct-display { font-size: 120px; }
    #percent-as-fraction #cPF-simple { font-size: 80px; }
    #percent-as-fraction .frac-both .frac-term.white { font-size: 72px; }
    #percent-as-fraction .frac-eq { font-size: 60px; }

    #time-problems .given { font-size: 20px; }
    #time-problems .front h2 { font-size: 28px; }
    #time-problems .back .value { font-size: 72px; }

    #adding-fractions .frac-both .frac-whole,
    #dividing-fractions .frac-both .frac-whole { font-size: 116px; }
  }