/* Grid Game */
  #gridWelcome, #gridVictory { text-align: center; color: white; overflow-y: auto; }
  #gridWelcome h1, #gridVictory h1 {
    font-size: 2.7em; margin-bottom: 12px;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.25); animation: bounce 2s infinite;
  }
  #gridVictory .trophy { font-size: 5em; margin: 20px 0; }
  #gridVictory .final-stars { font-size: 2em; margin: 15px 0; }
  .grid-welcome-visual {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; margin: 20px 0; font-size: 1.4em;
  }
  .grid-mini-cell {
    width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: 8px; font-weight: bold; font-size: 0.9em;
  }
  .grid-mini-cell.num { background: rgba(255,255,255,0.92); color: #4b5fd5; }
  .grid-mini-cell.fog { background: rgba(255,255,255,0.3); color: rgba(255,255,255,0.6); }

  #gridGame { justify-content: flex-start; padding: 10px 16px; overflow: hidden; }
  .grid-game-area {
    width: 100%; max-width: 800px; display: flex; flex-direction: column;
    gap: 8px; height: 100%; align-self: center;
  }
  .grid-info-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 14px; background: rgba(255,255,255,0.92);
    border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  }
  .grid-task {
    flex: 1; font-size: 1.05em; font-weight: bold; color: #333; line-height: 1.5;
  }
  .grid-task .highlight { color: #e74c3c; }
  .grid-flips {
    padding: 6px 14px; border-radius: 999px;
    background: #fff3e0; color: #e65100; font-weight: bold; font-size: 0.9em;
    white-space: nowrap;
  }
  .grid-board-wrap {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: rgba(255,255,255,0.95); border-radius: 16px;
    box-shadow: 0 6px 30px rgba(0,0,0,0.2); padding: 12px; overflow: auto;
  }
  .grid-board {
    display: grid; gap: 3px; margin: 0 auto;
  }
  .grid-cell {
    min-width: 36px; min-height: 36px; border: 2px solid #d0d8f0;
    border-radius: 8px; background: #f0f4ff; color: #4b5fd5;
    font-weight: bold; font-size: 1em; cursor: default;
    display: grid; place-items: center; transition: all 0.3s;
    font-family: inherit; padding: 2px;
  }
  .grid-cell.fog {
    background: linear-gradient(135deg, #b0bec5, #90a4ae);
    color: transparent; cursor: pointer; border-color: #90a4ae;
    position: relative;
  }
  .grid-cell.fog::after {
    content: '☁'; position: absolute; font-size: 1.1em;
    color: rgba(255,255,255,0.7);
  }
  .grid-cell.fog:hover { background: linear-gradient(135deg, #a0aeb5, #80949e); transform: scale(1.05); }
  .grid-cell.revealed {
    animation: fogClear 0.4s ease-out;
    background: #e8f5e9; border-color: #66bb6a; color: #2e7d32;
  }
  @keyframes fogClear {
    0% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
  }
  .grid-cell.treasure {
    background: linear-gradient(135deg, #fff9c4, #ffe082);
    border-color: #ffb300; color: #e65100;
    animation: treasurePop 0.5s ease-out;
    font-size: 1.2em;
  }
  @keyframes treasurePop {
    0% { transform: scale(0); } 50% { transform: scale(1.3); } 100% { transform: scale(1); }
  }
  .grid-cell.wrong-guess {
    background: #ffebee; border-color: #ef9a9a; color: #c62828;
    animation: shake 0.4s;
  }
  .grid-cell.header-row {
    background: #e3e9ff; color: #3949ab; font-size: 0.8em;
    border: none; min-height: 28px; cursor: default;
  }
  .grid-cell.header-col {
    background: #e3e9ff; color: #3949ab; font-size: 0.8em;
    border: none; min-width: 28px; cursor: default;
  }
  .grid-cell.header-corner { background: transparent; border: none; }
  .grid-cell.highlight-col {
    background: #e8eaf6; border-color: #7986cb;
  }
  .grid-input-area {
    display: flex; gap: 10px; align-items: center; justify-content: center;
    flex-wrap: wrap; padding: 10px 0;
  }
  .grid-input-area label { font-weight: bold; color: #333; font-size: 1em; }
  .grid-input-area input {
    width: 70px; padding: 8px; font-size: 1.15em; text-align: center;
    border: 2px solid #667eea; border-radius: 10px; font-family: inherit;
  }
  .grid-input-area input:focus { outline: none; border-color: #3949ab; }
  .grid-check-btn {
    padding: 10px 28px; background: linear-gradient(135deg, #667eea, #764ba2);
    color: white; border: none; border-radius: 12px;
    font-size: 1.05em; font-weight: bold; cursor: pointer;
    font-family: inherit; box-shadow: 0 4px 14px rgba(0,0,0,0.2);
    transition: all 0.2s;
  }
  .grid-check-btn:hover { transform: scale(1.05); }
  .grid-check-btn:disabled { opacity: 0.4; cursor: default; transform: none; }
  .grid-feedback {
    min-height: 36px; padding: 8px 14px; text-align: center;
    font-weight: bold; border-radius: 10px; font-size: 0.95em;
  }
  .grid-feedback.correct { background: #e8f5e9; color: #2e7d32; }
  .grid-feedback.wrong { background: #ffebee; color: #c62828; }
  .grid-feedback.info { background: #e3f2fd; color: #1565c0; }
  .grid-complete {
    padding: 20px; text-align: center; animation: cardIn 0.5s ease-out;
  }
  .grid-complete .congrats { font-size: 1.6em; color: #4caf50; font-weight: bold; margin-bottom: 8px; }
  .grid-complete .earned-stars { font-size: 2.2em; margin: 10px 0; }
  .grid-next-btn {
    margin-top: 14px; padding: 10px 36px; border: none; border-radius: 25px;
    background: linear-gradient(135deg, #66bb6a, #43a047);
    color: white; font-size: 1.05em; cursor: pointer; font-family: inherit;
    box-shadow: 0 4px 15px rgba(76,175,80,0.4);
  }
  .grid-walker {
    display: flex; gap: 8px; align-items: center; justify-content: center;
    margin: 8px 0;
  }
  .grid-walker-btn {
    padding: 8px 18px; border: 2px solid #667eea; border-radius: 10px;
    background: #f0f4ff; color: #667eea; font-weight: bold;
    cursor: pointer; font-family: inherit; font-size: 0.95em;
    transition: all 0.2s;
  }
  .grid-walker-btn:hover { background: #e0e5ff; }
  .grid-walker-btn.active { background: #667eea; color: white; }
  .grid-walker-pos {
    padding: 6px 14px; background: #fff3e0; border-radius: 10px;
    color: #e65100; font-weight: bold; font-size: 0.95em;
  }
  .grid-frame {
    position: absolute; border: 3px solid #e74c3c; border-radius: 6px;
    pointer-events: none; z-index: 5;
    box-shadow: 0 0 12px rgba(231,76,60,0.4);
    transition: all 0.2s;
  }
  .grid-frame.correct { border-color: #4caf50; box-shadow: 0 0 16px rgba(76,175,80,0.5); }

  @media (max-width: 600px) {
    .screen { padding-bottom: 74px; }
    .nav-controls { bottom: 8px; }
    .nav-btn { min-width: 82px; padding: 8px 12px; font-size: 0.9em; }
    #home h1 { font-size: 2em; }
    .home-subtitle { font-size: 1em; margin-bottom: 16px; }
    .topic-grid { grid-template-columns: 1fr; gap: 12px; }
    .topic-card { min-height: 150px; padding: 16px 14px; }
    .topic-icon { font-size: 2.6em; margin-bottom: 10px; }
    .topic-name { font-size: 1.25em; }
    #areaWelcome h1, #areaVictory h1 { font-size: 2em; }
    .am-card { max-width: 150px; min-height: 160px; padding: 6px; }
    .am-card svg { height: 85px; }
    .am-combo-float .am-btext { font-size: 42px; }
    .am-formula-grid { grid-template-columns: 1fr; }
    #tenWelcome h1, #tenVictory h1 { font-size: 2em; }
    #gridWelcome h1, #gridVictory h1 { font-size: 2em; }
    .grid-cell { min-width: 30px; min-height: 30px; font-size: 0.85em; }
    .grid-board { gap: 2px; }
    .grid-info-bar { padding: 6px 10px; }
    .grid-task { font-size: 0.92em; }
    .ten-welcome-cards { font-size: 2.4em; margin: 16px 0; }
    .ten-welcome-card { width: 48px; height: 60px; }