/* 由 pinyingame.html 内联样式抽出（内容不变，便于缓存） */

    /* ========== RESET & BASE ========== */
    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
    body {
      margin: 0; min-height: 100vh;
      background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 50%, #80deea 100%);
      font-family: 'Comic Sans MS', 'Chalkboard SE', 'Arial Rounded MT Bold', sans-serif;
      display: flex; justify-content: center; align-items: flex-start;
      overflow-y: auto; user-select: none;
    }
    /* ========== GAME CONTAINER ========== */
    #game {
      width: 100%; max-width: 500px; min-height: 100vh;
      position: relative; overflow: hidden;
      background: linear-gradient(180deg, #e0f7fa 0%, #b2ebf2 100%);
      box-shadow: 0 0 40px rgba(0,200,200,0.2);
    }
    .screen { display: none; width: 100%; min-height: 100vh; min-height: 100dvh; flex-direction: column; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
    .screen.active { display: flex; }
    .screen-center { justify-content: center; align-items: center; text-align: center; }
    /* ========== MENU SCREEN ========== */
    #menu-screen {
      background: linear-gradient(180deg, #e8f5e9 0%, #c8e6c9 30%, #a5d6a7 100%);
    }
    .menu-title {
      font-size: 2.4em; font-weight: bold; color: #fff;
      text-shadow: 3px 3px 0 #43a047, 0 0 20px rgba(255,255,255,0.5);
      margin-bottom: 4px; animation: bounceIn 1s ease;
    }
    .menu-subtitle {
      font-size: 1em; color: #fff; margin-bottom: 8px;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.15);
    }
    .menu-mascot { font-size: 4.5em; animation: float 2s ease-in-out infinite; margin-bottom: 8px; }
    .mode-grid { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 320px; }
    .mode-btn {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 20px; border: 3px solid rgba(255,255,255,0.6);
      border-radius: 20px; font-size: 1.2em; font-weight: bold;
      cursor: pointer; transition: all 0.2s; color: #fff;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
      box-shadow: 0 4px 15px rgba(0,0,0,0.1), inset 0 2px 0 rgba(255,255,255,0.3);
    }
    .mode-btn:hover { transform: scale(1.03); }
    .mode-btn:active { transform: scale(0.97); }
    .mode-btn .mode-emoji { font-size: 1.8em; }
    .mode-btn .mode-desc { font-size: 14px; opacity: 0.85; font-weight: normal; display: block; }
    .mode-shengmu { background-color: #42a5f5; background-image: linear-gradient(135deg, #42a5f5, #1e88e5); }
    .mode-yunmu { background-color: #ec407a; background-image: linear-gradient(135deg, #ec407a, #d81b60); }
    .mode-shengdiao { background-color: #ffa726; background-image: linear-gradient(135deg, #ffa726, #fb8c00); }
    .mode-zhengtiren { background-color: #66bb6a; background-image: linear-gradient(135deg, #66bb6a, #43a047); }
    /* ========== GAME SCREEN ========== */
    #game-screen { padding: 0; }
    .game-header {
      display: flex; align-items: center; gap: 8px;
      padding: 12px 16px; background: rgba(255,255,255,0.85);
      -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); flex-shrink: 0;
    }
    .back-btn {
      font-size: 1.5em; background: none; border: none; cursor: pointer;
      padding: 4px 8px; border-radius: 12px;
      min-width: 44px; min-height: 44px;
      display: flex; align-items: center; justify-content: center;
    }
    .back-btn:hover { background: rgba(0,0,0,0.05); }
    .game-mode-label {
      font-size: 0.85em; font-weight: bold; color: #555;
      padding: 4px 12px; border-radius: 10px; background: rgba(0,0,0,0.05);
    }
    .game-stats {
      margin-left: auto; display: flex; gap: 12px; font-size: 1.1em;
    }
    .game-stats span { display: flex; align-items: center; gap: 4px; }
    /* Progress */
    .progress-wrap {
      width: 100%; height: 8px; background: rgba(200,200,200,0.5);
      flex-shrink: 0; position: relative;
    }
    .progress-bar {
      height: 100%; width: 0%;
      background: linear-gradient(90deg, #66bb6a, #42a5f5, #ab47bc);
      border-radius: 0 4px 4px 0; transition: width 0.5s ease;
    }
    .progress-text {
      position: absolute; right: 8px; top: -18px;
      font-size: 0.75em; color: #888; font-weight: bold;
    }
    /* Game Content Area */
    .game-content {
      flex: 1; display: flex; flex-direction: column;
      align-items: center; padding: 16px;
      overflow-y: auto; min-height: 0;
    }
    /* Feedback overlay */
    .feedback-overlay {
      position: absolute; top: 0; left: 0; right: 0; bottom: 0;
      display: none; flex-direction: column;
      align-items: center; justify-content: center;
      z-index: 10; pointer-events: none;
    }
    .feedback-overlay.show { display: flex; }
    .feedback-text {
      font-size: 2em; font-weight: bold; padding: 20px 32px;
      border-radius: 24px; animation: popIn 0.4s ease;
    }
    .feedback-text.correct {
      color: #fff;
      background: linear-gradient(135deg, #fdd835, #ff9800);
      box-shadow: 0 8px 30px rgba(255,152,0,0.4);
    }
    .feedback-text.wrong {
      color: #fff;
      background: linear-gradient(135deg, #90a4ae, #78909c);
      box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    }
    .feedback-hint {
      margin-top: 12px; font-size: 1em; color: #fff;
      background: rgba(0,0,0,0.3); padding: 8px 20px;
      border-radius: 16px; animation: fadeInUp 0.5s ease;
    }
    .feedback-stars {
      font-size: 3em; margin-top: 8px; animation: starBurst 0.6s ease;
    }
    /* Confetti Canvas */
    #confetti-canvas {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
      pointer-events: none; z-index: 20;
    }
    /* ===== Game Mode Specific Styles ===== */
    /* --- Pinyin Tile --- */
    .pinyin-tile {
      display: inline-flex; align-items: center; justify-content: center;
      padding: 16px 28px; border-radius: 20px;
      font-size: 2.2em; font-weight: bold; color: #fff;
      cursor: pointer; transition: all 0.2s;
      box-shadow: 0 4px 15px rgba(0,0,0,0.15), inset 0 2px 0 rgba(255,255,255,0.3);
      min-width: 80px; margin: 6px;
    }
    .pinyin-tile:active { transform: scale(0.93); }
    .pinyin-tile.shengmu { background: linear-gradient(135deg, #42a5f5, #1e88e5); }
    .pinyin-tile.yunmu { background: linear-gradient(135deg, #ec407a, #d81b60); }
    .pinyin-tile.zhengtiren { background: linear-gradient(135deg, #66bb6a, #43a047); }
    .pinyin-tile.play-anim { animation: correctPop 0.4s ease; }
    /* Question Display */
    .question-display {
      font-size: 1.5em; font-weight: bold; color: #333;
      text-align: center; margin: 8px 0; line-height: 1.5;
    }
    .question-char {
      font-size: 3.5em; display: block; margin: 8px 0;
      animation: popIn 0.4s ease;
    }
    /* --- Tile Grid (Learning Mode) --- */
    .tile-grid {
      display: flex; flex-wrap: wrap; justify-content: center;
      gap: 8px; margin: 12px 0; max-height: 300px; overflow-y: auto;
    }
    .tile-grid .pinyin-tile { font-size: 1.4em; padding: 12px 18px; min-width: 60px; }
    /* --- Multiple Choice --- */
    .answer-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 10px; width: 100%; max-width: 340px; margin: 12px 0;
    }
    .answer-btn {
      padding: 18px 12px; border: none; border-radius: 18px;
      font-size: 1.4em; font-weight: bold; color: #fff;
      cursor: pointer; transition: all 0.15s;
      text-align: center;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15), inset 0 2px 0 rgba(255,255,255,0.3);
      min-height: 60px;
    }
    .answer-btn:active { transform: scale(0.95); }
    .answer-btn.disabled { pointer-events: none; opacity: 0.6; }
    .ab-0 { background: linear-gradient(135deg, #42a5f5, #1e88e5); }
    .ab-1 { background: linear-gradient(135deg, #66bb6a, #43a047); }
    .ab-2 { background: linear-gradient(135deg, #ffa726, #fb8c00); }
    .ab-3 { background: linear-gradient(135deg, #ab47bc, #8e24aa); }
    .answer-btn.correct-anim { animation: correctPop 0.5s ease; }
    .answer-btn.wrong-anim { animation: wrongShake 0.4s ease; background: #bdbdbd !important; }
    /* --- Tone Practice --- */
    .tone-practice {
      display: flex; flex-direction: column; align-items: center;
      width: 100%; max-width: 340px;
    }
    .tone-hear-btn {
      font-size: 2.5em; padding: 20px 40px; border: none; border-radius: 24px;
      background: linear-gradient(135deg, #ffa726, #fb8c00); color: #fff;
      cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.15);
      margin: 12px 0; transition: all 0.2s; font-weight: bold;
    }
    .tone-hear-btn:active { transform: scale(0.93); }
    .tone-hear-btn .play-icon { font-size: 0.8em; }
    .tone-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 12px; width: 100%; margin: 12px 0;
    }
    .tone-btn {
      padding: 16px; border: 4px solid transparent; border-radius: 20px;
      font-size: 1.7em; font-weight: bold; cursor: pointer;
      transition: all 0.2s; text-align: center;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .tone-btn:active { transform: scale(0.95); }
    .tone-btn .tone-road {
      display: block; font-size: 0.55em; margin-top: 6px;
      color: rgba(255,255,255,0.85);
    }
    .tone-btn.tone-1 {
      background: linear-gradient(135deg, #42a5f5, #1e88e5); color: #fff;
    }
    .tone-btn.tone-1.selected { border-color: #0d47a1; box-shadow: 0 0 20px rgba(33,150,243,0.5); }
    .tone-btn.tone-2 {
      background: linear-gradient(135deg, #66bb6a, #43a047); color: #fff;
    }
    .tone-btn.tone-2.selected { border-color: #1b5e20; box-shadow: 0 0 20px rgba(76,175,80,0.5); }
    .tone-btn.tone-3 {
      background: linear-gradient(135deg, #ffa726, #fb8c00); color: #fff;
    }
    .tone-btn.tone-3.selected { border-color: #e65100; box-shadow: 0 0 20px rgba(255,152,0,0.5); }
    .tone-btn.tone-4 {
      background: linear-gradient(135deg, #ef5350, #e53935); color: #fff;
    }
    .tone-btn.tone-4.selected { border-color: #b71c1c; box-shadow: 0 0 20px rgba(244,67,54,0.5); }
    .tone-btn.disabled { pointer-events: none; opacity: 0.5; }
    /* --- Drag and Drop (Syllable Builder) --- */
    .syllable-builder {
      width: 100%; max-width: 340px; margin: 12px 0;
    }
    .sb-area {
      display: flex; align-items: center; justify-content: center;
      gap: 12px; margin: 12px 0; min-height: 80px;
    }
    .sb-slot {
      width: 90px; height: 70px; border: 3px dashed #aaa;
      border-radius: 16px; display: flex; align-items: center;
      justify-content: center; font-size: 1.6em; font-weight: bold;
      color: #999; background: rgba(255,255,255,0.5);
      transition: all 0.2s;
    }
    .sb-slot.filled { border-style: solid; border-color: #66bb6a; background: #e8f5e9; color: #333; }
    .sb-slot.dragover { border-color: #42a5f5; background: #e3f2fd; transform: scale(1.05); }
    .sb-drag-items {
      display: flex; flex-wrap: wrap; justify-content: center;
      gap: 8px; margin: 8px 0;
    }
    .sb-drag-item {
      padding: 12px 20px; border-radius: 14px; font-size: 1.2em;
      font-weight: bold; color: #fff; cursor: pointer;
      box-shadow: 0 3px 10px rgba(0,0,0,0.15);
      transition: all 0.2s;
    }
    .sb-drag-item:active { transform: scale(0.93); cursor: pointer; }
    .sb-drag-item.dragging { opacity: 0.5; }
    .sb-check-btn {
      padding: 12px 32px; border: none; border-radius: 16px;
      font-size: 1.1em; font-weight: bold; color: #fff;
      background: linear-gradient(135deg, #66bb6a, #43a047);
      cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,0.15);
      margin-top: 12px;
    }
    /* --- Mastery Display --- */
    .mastery-section {
      width: 100%; max-width: 340px; margin: 8px 0;
    }
    .mastery-title {
      font-size: 1em; font-weight: bold; color: #555; margin-bottom: 6px;
    }
    .mastery-grid {
      display: flex; flex-wrap: wrap; gap: 4px;
    }
    .mastery-item {
      padding: 4px 10px; border-radius: 10px;
      font-size: 0.85em; font-weight: bold;
      transition: all 0.3s;
    }
    .mastery-item.mastered { background: #c8e6c9; color: #2e7d32; }
    .mastery-item.not-mastered { background: #eceff1; color: #90a4ae; }
    /* ========== END SCREEN ========== */
    #end-screen {
      background: linear-gradient(180deg, #fff8e1 0%, #ffecb3 50%, #ffe082 100%);
      justify-content: center; align-items: center;
    }
    .end-card {
      background: #fff; border-radius: 24px; padding: 28px 24px;
      max-width: 380px; width: 100%;
      box-shadow: 0 8px 40px rgba(0,0,0,0.15);
      border: 4px solid #66bb6a; text-align: center;
      animation: popIn 0.6s ease;
    }
    .end-title { font-size: 1.8em; color: #43a047; margin-bottom: 4px; }
    .end-subtitle { font-size: 1em; color: #888; margin-bottom: 12px; }
    .end-mascot { font-size: 4em; margin: 8px 0; }
    .end-stars { font-size: 2.2em; margin: 8px 0; letter-spacing: 4px; }
    .end-mastered-sounds {
      margin: 12px 0; text-align: center;
    }
    .end-ms-title { font-size: 1em; font-weight: bold; color: #555; margin-bottom: 6px; }
    .end-ms-grid {
      display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
    }
    .end-ms-item {
      padding: 4px 10px; border-radius: 10px;
      font-size: 1em; font-weight: bold;
      background: #c8e6c9; color: #2e7d32;
    }
    .end-message { font-size: 0.95em; color: #666; margin: 12px 0; line-height: 1.5; }
    .end-btns { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
    .end-btn {
      padding: 14px 28px; border: none; border-radius: 16px;
      font-size: 1.1em; font-weight: bold; cursor: pointer;
      color: #fff; transition: all 0.2s;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    .end-btn:active { transform: scale(0.95); }
    .end-btn.replay { background: linear-gradient(135deg, #66bb6a, #43a047); }
    .end-btn.menu { background: linear-gradient(135deg, #42a5f5, #1e88e5); }
    /* ========== EXPLORE SCREEN (learning mode with tiles) ========== */
    .explore-header {
      display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; justify-content: center;
    }
    .explore-header button {
      padding: 8px 16px; border: none; border-radius: 14px;
      font-size: 0.85em; font-weight: bold; color: #fff; cursor: pointer;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .explore-header button:active { transform: scale(0.95); }
    .explore-header .btn-learn { background: linear-gradient(135deg, #42a5f5, #1e88e5); }
    .explore-header .btn-quiz { background: linear-gradient(135deg, #ffa726, #fb8c00); }
    .current-pinyin-display {
      font-size: 2.5em; font-weight: bold; padding: 12px;
      color: #fff; border-radius: 20px; margin: 8px 0;
      text-align: center; min-width: 120px;
    }
    /* ========== ANIMATIONS ========== */
    @keyframes bounceIn {
      0% { transform: scale(0); opacity: 0; }
      50% { transform: scale(1.15); }
      100% { transform: scale(1); opacity: 1; }
    }
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    @keyframes popIn {
      0% { transform: scale(0); opacity: 0; }
      70% { transform: scale(1.1); }
      100% { transform: scale(1); opacity: 1; }
    }
    @keyframes correctPop {
      0% { transform: scale(1); }
      50% { transform: scale(1.15); }
      100% { transform: scale(1); }
    }
    @keyframes wrongShake {
      0%, 100% { transform: translateX(0); }
      20% { transform: translateX(-10px); }
      40% { transform: translateX(10px); }
      60% { transform: translateX(-8px); }
      80% { transform: translateX(8px); }
    }
    @keyframes fadeInUp {
      0% { opacity: 0; transform: translateY(20px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    @keyframes starBurst {
      0% { transform: scale(0) rotate(0deg); opacity: 0; }
      50% { transform: scale(1.3) rotate(180deg); }
      100% { transform: scale(1) rotate(360deg); opacity: 1; }
    }
    @keyframes sparkle {
      0%, 100% { opacity: 0; transform: scale(0); }
      50% { opacity: 1; transform: scale(1); }
    }
    @keyframes slideUp {
      0% { transform: translateY(100%); opacity: 0; }
      100% { transform: translateY(0); opacity: 1; }
    }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(-5deg); }
      75% { transform: rotate(5deg); }
    }
    .wiggle { animation: wiggle 0.3s ease; }
    /* ========== MISC ========== */
    .hidden { display: none !important; }
    .sparkle-effect {
      position: absolute; pointer-events: none;
      font-size: 1.5em; animation: sparkle 0.8s ease forwards;
    }
    /* ========== 玩法说明 ========== */
    @media (max-width: 400px) {
      .menu-title { font-size: 1.8em; }
      .pinyin-tile { font-size: 1.2em; padding: 10px 16px; min-width: 50px; min-width:48px;min-height:48px; }
      .question-char { font-size: 2.8em; }
      .answer-btn { font-size: 1.2em; padding: 14px 10px; }
    }