.reaction{width:100%;min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px}.reaction .container{background:white;border-radius:20px;padding:40px;max-width:900px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3)}.reaction .title{text-align:center;color:#667eea;margin-bottom:22px;font-size:2rem}.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:12px;gap:12px;margin-bottom:16px}.stats-card{background:#f8f9fa;border:2px solid #dee2e6;border-radius:16px;padding:14px;text-align:center}.stats-title{color:#667eea;font-weight:900;margin-bottom:6px}.stats-value{font-size:1.2rem;font-weight:900;color:#495057}.area{width:100%;border-radius:18px;border:2px solid #dee2e6;background:#f8f9fa;padding:26px 18px;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;min-height:160px}.area:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(0,0,0,.12)}.area-text{font-size:1.25rem;font-weight:900;color:#495057;text-align:center}.area-sub{font-size:1rem;font-weight:800;color:rgba(73,80,87,.7)}.area--waiting{background:#fff3cd;border-color:#ffeeba}.area--ready{background:#d4edda;border-color:#c3e6cb}.area--tooSoon{background:#f8d7da;border-color:#f5c6cb}.area--result{border-color:#667eea}.controls{display:flex;gap:10px;justify-content:center;margin-top:14px}.primary{padding:12px 16px;font-weight:900;color:white;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;cursor:pointer;transition:all .2s ease}.primary:disabled{opacity:.7;cursor:not-allowed}.secondary{padding:12px 16px;font-weight:900;color:#667eea;background:white;border:2px solid #dee2e6;border-radius:12px;cursor:pointer;transition:all .2s ease}.hint{margin-top:14px;text-align:center;color:rgba(73,80,87,.75);font-weight:700}@media (max-width:768px){.reaction .container{padding:26px 18px}.controls{flex-direction:column}}