.theme-frac { background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%); }
.theme-frac .game-header h1 { color: #e65100; }
.sorted-bar { display: flex; gap: 8px; justify-content: center; min-height: 60px; align-items: center; margin: 10px auto; flex-wrap: wrap; padding: 0 15px; }
.sorted-item { padding: 8px 14px; background: #e8f5e9; border: 2px solid #4caf50; border-radius: 10px; font-size: 1.1rem; font-weight: 700; font-family: 'Baloo 2', cursive; color: #2e7d32; animation: popIn 0.3s ease; }
@keyframes popIn { from { transform: scale(0); } to { transform: scale(1); } }
.frac-grid { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 15px auto; max-width: 400px; padding: 0 15px; }
.frac-btn { min-width: 70px; padding: 14px 12px; border: 2px solid #ffcc80; border-radius: 14px; background: white; text-align: center; cursor: pointer; transition: all 0.2s; }
.frac-btn:hover { background: #fff3e0; border-color: #ff9800; transform: scale(1.08); }
.frac-btn .num { font-size: 1.3rem; font-weight: 800; color: #e65100; font-family: 'Baloo 2', cursive; display: block; }
.frac-btn .line { width: 80%; height: 2px; background: #333; margin: 2px auto; }
.frac-btn .den { font-size: 1.3rem; font-weight: 800; color: #333; font-family: 'Baloo 2', cursive; display: block; }
.frac-btn.correct { border-color: #4caf50; background: #e8f5e9; }
.frac-btn.wrong { border-color: #f44336; background: #ffebee; animation: shake 0.4s; }
.frac-btn.used { opacity: 0.3; pointer-events: none; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }